Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>2014 UPDATE</strong>: The modern way to solve this layout problem is to <a href="https://stackoverflow.com/a/26558049/1269037">use the <code>flexbox</code> CSS model</a>. It's supported by all major browsers and IE11+.</p> <hr> <p>2012: The correct way to do this with CSS alone is to use <code>display: table</code> and <code>display: table-row</code>. These are <a href="http://caniuse.com/css-table" rel="nofollow noreferrer">supported by all major browsers</a>, starting with IE8. This is <em>not</em> using tables for display. You'll use divs:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { height: 100%; margin: 0; } .wrapper { display: table; height: 100%; width: 100%; background: yellow; /* just to make sure nothing bleeds */ } .header { display: table-row; background: gray; } .content { display: table-row; /* height is dynamic, and will expand... */ height: 100%; /* ...as content is added (won't scroll) */ background: turquoise; } .footer { display: table-row; background: lightgray; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt; &lt;div class="header"&gt; &lt;h1&gt;Header&lt;/h1&gt; &lt;p&gt;Header of variable height&lt;/p&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;h2&gt;Content that expands in height dynamically to adjust for new content&lt;/h2&gt; Content height will initially be the remaining height in its container (&lt;code&gt;.wrapper&lt;/code&gt;). &lt;!-- p style="font-size: 4000%"&gt;Tall content&lt;/p --&gt; &lt;/div&gt; &lt;div class="footer"&gt; &lt;h3&gt;Sticky footer&lt;/h3&gt; &lt;p&gt;Footer of variable height&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>That's it. The divs are wrapped as you'd expect.</p>
    singulars
    1. This table or related slice is empty.
    1. POSet div to remaining height using CSS with unknown height divs above and below
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USDan Dascalescu
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI would like to add the following refinement: http://jsfiddle.net/6dbyr/ This allows to have a scrollable area inside the cell that takes up the full height.
      singulars
      1. PO
      1. USuser132837
    2. COArgh... and a big breaker, that refinement doesn't work in Firefox. See https://bugzilla.mozilla.org/show_bug.cgi?id=794644 But this does: http://stackoverflow.com/questions/12605816/sticky-flexible-footers-and-headers-css-working-fine-in-webkit-but-not-in-gecko/12622740#12622740
      singulars
      1. PO
      1. USuser132837
    3. CONote that content (if its height is bigger than the wrapper height) will overflow in IE (even IE10).
      singulars
      1. PO
      1. USBoris D. Teoharov
 

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