Databases
StackOverflow2013
Postsdbo
POCSS: Make one central div's height expand to fill what's left in a FIXED-HEIGHT container
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS: Make one central div's height expand to fill what's left in a FIXED-HEIGHT container
    primarykey
    data
    text
    <p>Sorry guys, it's another CSS height "100%" (sortof) question...</p> <p>I have a layout like this:</p> <pre><code> ---------------. |Containing div | Containing div's height is FIXED | .-----------. | (say 400px for simplicity) | |Inner div1 | | Inner div1 has height fixed (say 50px) | '-----------' | Inner div3 has static-but-unknown content, | .-----------. | height not known at render time | |Inner | | Inner Variable Div should expand to the rest | |Variable | | of the space - i.e. I want to eliminate | |Div | | the "blank space" | '-----------' | | .-----------. | | |Inner div3 | | | |with fixed | | | |usercontent| | | '-----------' | | blank space | '---------------' </code></pre> <p>That's: one Container Div with a FIXED HEIGHT (say 400px). Several divs inside it, vertically stacked: div1, Variable Div, div3. At least one of them (div3) has static-but-unknown content, so I can't just slap pixel calculated heights on everything. Let's say for the sake of argument that div1+div3 WILL fit within Container Div. </p> <p>I want to make Variable Div expand to fill the rest of the height within Container Div's 400px. But I can't specify its height as 100% because that ignores the slice that the other inner divs need, and overflows the Container Div. </p> <p>This is different to most CSS-height-tagged questions on here, but <a href="https://stackoverflow.com/questions/1966447">CSS div height won&#39;t expand</a> and <a href="https://stackoverflow.com/questions/4219983/">Fixed parent container height, child to expand/be-limited-to parent container</a> might be related. </p> <p>I'm after a pure CSS solution if at all possible. I'm okay with it only working in FF/Webkit/very recent IE.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USAlexC
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS: Make one central div's height expand to fill what's left in a FIXED-HEIGHT container
      1. USDamien-Wright
      1. VTFavorite
    2. VO
      singulars
      1. POCSS: Make one central div's height expand to fill what's left in a FIXED-HEIGHT container
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCSS: Make one central div's height expand to fill what's left in a FIXED-HEIGHT container
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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