Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It's not a great idea to use <code>display: table</code> or the <code>float</code> property for layout. Tables are for tabular data, and floats are designed to allow text to flow around them in paragraphs. You can easily solve this problem by assigning <code>position: absolute</code> to your <code>#navbar</code> element and adjusting a few properties elsewhere to make the layout act as desired.</p> <p><s></p> <pre><code>#navbar { padding: 33px 0px 0px 0px; float: left; } </code></pre> <p></s></p> <pre><code>#navbar { position: absolute; height: 100%; } #container { position: relative; } #nav-bar ul { margin: 33px 0 0; } </code></pre> <p>I changed the <code>margin</code> on <code>#nav-bar ul</code> because the navbar's padding was causing it to increase in height past the page's limit. If you need more info on absolute positioning, further reading can be done <a href="http://www.w3.org/TR/CSS21/visuren.html" rel="nofollow">here</a>.</p> <p>This solution will work without javascript and will work on almost all browsers.</p> <p>Edit: since you want the page to change depending on the height of the user's screen and the height of the <code>#content</code> div, you can use a jQuery one-liner to check to see if the <code>#content</code> div is tall enough or not.</p> <pre><code>($('#content').offset().top+$('#content').height() &lt; $(window).height())?($('#content').height($(window).height()-90-$('#content').offset().top)):null; </code></pre> <p>This code is equivalent to saying "If the content div's height and offset is below the height of the window, increase the content div's height to exactly the height it needs to be to fill the window, otherwise do nothing."</p>
    singulars
    1. This table or related slice is empty.
    1. PODiv not exactly equalling height of parent div with inherit value
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJoey
    1. USJoey
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PODiv not exactly equalling height of parent div with inherit value
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThanks, we're nearly there! Your solution works wonderfully as long as the content within #content is longer than the window. However, if you go check the site again now, I've shortened #content's length, and the whole of #center-panel and its children do not reach all the way down to the window height like they should...even though min-height is set to 100% for html, body, and #center-panel itself. Suggestions?
      singulars
      1. PO
      1. UShannebaumsaway
    2. COOh, I see, you have a condition that states that the height of the page should be at a minimum the screen's height. Well, you'll have to use javascript for that, since `min-height` isn't really a conditional tool. I'd do something like `($('#content').offset().top+$('#content').height() < $(window).height())?($('#content').height($(window).height()-90-$('#content').offset().top)):;`, the value of `90` being the `top` and `bottom` padding value of `content`. Let me know if this ternary operator is confusing, I can explain it further.
      singulars
      1. PO
      1. USJoey
    3. COOK, you got that part solved! One last thing: if you shrink your window and reload, then click `News` followed by either `2013` or `2014`, #nav-bar can now extend _past_ #content and #center-panel. So in that case, I'd need #center-panel to extend to match the height of #nav-bar...
      singulars
      1. PO
      1. UShannebaumsaway
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload