Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Expanding the <code>#down</code> child to fill the remaining space of <code>#container</code> can be accomplished in various ways depending on the browser support you wish to achieve and whether or not <code>#up</code> has a defined height.</p> <p><strong>Samples</strong></p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { width: 100px; height: 300px; border: 1px solid red; float: left; } .up { background: green; } .down { background: pink; } .grid.container { display: grid; grid-template-rows: 100px; } .flexbox.container { display: flex; flex-direction: column; } .flexbox.container .down { flex-grow: 1; } .calc .up { height: 100px; } .calc .down { height: calc(100% - 100px); } .overflow.container { overflow: hidden; } .overflow .down { height: 100%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid container"&gt; &lt;div class="up"&gt;grid &lt;br /&gt;grid &lt;br /&gt;grid &lt;br /&gt; &lt;/div&gt; &lt;div class="down"&gt;grid &lt;br /&gt;grid &lt;br /&gt;grid &lt;br /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="flexbox container"&gt; &lt;div class="up"&gt;flexbox &lt;br /&gt;flexbox &lt;br /&gt;flexbox &lt;br /&gt; &lt;/div&gt; &lt;div class="down"&gt;flexbox &lt;br /&gt;flexbox &lt;br /&gt;flexbox &lt;br /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="calc container"&gt; &lt;div class="up"&gt;calc &lt;br /&gt;calc &lt;br /&gt;calc &lt;br /&gt; &lt;/div&gt; &lt;div class="down"&gt;calc &lt;br /&gt;calc &lt;br /&gt;calc &lt;br /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="overflow container"&gt; &lt;div class="up"&gt;overflow &lt;br /&gt;overflow &lt;br /&gt;overflow &lt;br /&gt; &lt;/div&gt; &lt;div class="down"&gt;overflow &lt;br /&gt;overflow &lt;br /&gt;overflow &lt;br /&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p><strong>Grid</strong></p> <p>CSS's <code>grid</code> layout offers yet another option, though it may not be as straightforward as the Flexbox model. However, it only requires styling the container element:</p> <pre><code>.container { display: grid; grid-template-rows: 100px } </code></pre> <p>The <code>grid-template-rows</code> defines the first row as a fixed 100px height, and the remain rows will automatically stretch to fill the remaining space.</p> <p>I'm pretty sure IE11 requires <code>-ms-</code> prefixes, so make sure to validate the functionality in the browsers you wish to support.</p> <p><strong>Flexbox</strong></p> <p>CSS3's <a href="http://www.w3.org/TR/css-flexbox-1/" rel="noreferrer">Flexible Box Layout Module (<code>flexbox</code>)</a> is now well-supported and can be very easy to implement. Because it is flexible, it even works when <code>#up</code> does not have a defined height.</p> <pre><code>#container { display: flex; flex-direction: column; } #down { flex-grow: 1; } </code></pre> <p>It's important to note that IE10 &amp; IE11 support for some flexbox properties can be buggy, and IE9 or below has no support at all.</p> <p><strong>Calculated Height</strong></p> <p>Another easy solution is to use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" rel="noreferrer">CSS3 <code>calc</code></a> functional unit, <a href="https://stackoverflow.com/a/21899764/1028949">as Alvaro points out in his answer</a>, but it requires the height of the first child to be a known value:</p> <pre><code>#up { height: 100px; } #down { height: calc( 100% - 100px ); } </code></pre> <p>It is pretty widely supported, with the only notable exceptions being &lt;= IE8 or Safari 5 (no support) and IE9 (partial support). Some other issues include using <em>calc</em> in conjunction with <em>transform</em> or <em>box-shadow</em>, so be sure to test in multiple browsers if that is of concern to you.</p> <p><strong>Other Alternatives</strong></p> <p>If older support is needed, you could add <code>height:100%;</code> to <code>#down</code> will make the pink div full height, with one caveat. It will cause overflow for the container, because <code>#up</code> is pushing it down.</p> <p>Therefore, you could add <code>overflow: hidden;</code> to the container to fix that.</p> <p>Alternatively, if the height of <code>#up</code> is fixed, you could position it absolutely within the container, and add a padding-top to <code>#down</code>.</p> <p>And, yet another option would be to use a table display:</p> <pre><code>#container { width: 300px; height: 300px; border: 1px solid red; display: table;} #up { background: green; display: table-row; height: 0; } #down { background: pink; display: table-row;}​ </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POMake div (height) occupy parent remaining height
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USQuantastical
    1. USQuantastical
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POMake div (height) occupy parent remaining height
      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
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI would like #down to have #container height - #up height. So overflow hidden is not what I'm looking for. And also don't want to use absolute position. Thanks!
      singulars
      1. PO
      1. USAlvaro
    2. CO@Alvaro, I've added another option, using table displays. Disadvantage here is compatibility. P.S. An element positioned absolutely inside a container with `position: relative;` positions it relative to the container, not the window. So, that should be a viable option.
      singulars
      1. PO
      1. USQuantastical
    3. COCould you please give me an example of what you mean with 'An element positioned absolutely inside a container with position: relative; positions it relative to the container, not the window.' Your table solution isn't exactly what Im looking for:I would like #down to have #container height - #up height. (In this solution #down height = #container height)
      singulars
      1. PO
      1. USAlvaro
 

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