CSS Layout That Fills Available Space

CSS layout that fills available space

how about THIS?

it works with konqueror (KHTML), chrome (webkit) and firefox (gecko). like anything recent, it will probably barf under IE6.

    <html><body style="margin: 0; padding: 0;">
    <div style="position: absolute; background: #faa; 
                height: 100px; top: 0px; width: 100%;">header</div>
    <div style="position: absolute; background: #afa; 
                top: 100px; bottom: 100px; left: 0; width: 100px;">left</div>
    <div style="position: absolute; background: #afa; 
                top: 100px; bottom: 100px; right: 0; width: 100px;">right</div>
    <div style="position: absolute; background: #faa; 
                height: 100px; bottom: 0px; width: 100%;">footer</div>
    <div style="position: absolute; background: #aaf; 
                bottom:100px; left: 100px;top: 100px;right: 100px; overflow: auto;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt tempor
 velit quis volutpat. Nulla pharetra pulvinar arcu sed lacinia. Nulla ultrices aliquet sem, 
vitae commodo elit condimentum ut. Nulla consectetur facilisis nibh, et tempus purus 
pellentesque nec. Ut eu nibh ut arcu mattis luctus. Cras at interdum quam. Pellentesque 
imperdiet mi vitae felis sollicitudin iaculis. Maecenas accumsan tortor neque, at posuere 
felis. Quisque ultricies mi quis dolor pellentesque elementum. Maecenas quis nunc tortor. 
Cras eu velit faucibus nulla volutpat mollis. Aliquam fermentum lobortis diam ut pharetra. 
Duis mattis posuere fringilla. Morbi consectetur mauris vel libero pellentesque varius. 
Aenean leo enim, placerat a feugiat nec, ultrices et nulla. Etiam tincidunt urna id justo 
molestie faucibus. Cras neque enim, semper et sodales eu, volutpat nec urna. Vestibulum 
interdum arcu et ante egestas ut lacinia dui semper. Cras ligula lacus, aliquet nec dapibus 
ac, commodo vitae libero. In gravida venenatis sapien a convallis.</p>

    <p>Nulla ac risus eu velit pulvinar pretium. Etiam porttitor viverra sollicitudin. 
Donec lectus mi, posuere quis luctus facilisis, lacinia non ante. Sed sed mi neque. Etiam 
neque risus, bibendum et tincidunt vel, pharetra nec risus. In hac habitasse platea 
dictumst. Nam sollicitudin condimentum lorem, quis dignissim turpis sagittis nec. 
Pellentesque diam nunc, rhoncus quis lobortis id, lacinia quis lorem. Maecenas tempor metus 
nec velit facilisis in rhoncus lectus varius. Integer mollis, odio ut pharetra varius, elit 
nulla pellentesque neque, a egestas est justo dapibus neque. Vivamus a mauris massa, sit 
amet commodo orci. Aliquam nec iaculis sapien. Suspendisse ornare, tortor eget mattis 
tempus, nulla ligula fermentum elit, vitae euismod odio metus ac risus. Etiam iaculis 
dignissim consectetur. Nunc molestie lorem ac neque pulvinar vitae eleifend justo 
facilisis.</p>

    <p>Duis a sem turpis, et cursus arcu. Suspendisse potenti. Sed eu risus orci, eget 
bibendum justo. Praesent dapibus porttitor mauris, ac sollicitudin eros pretium quis. 
Curabitur mi eros, aliquam et ultrices et, adipiscing ut mauris. Nunc pretium malesuada nisi 
laoreet consectetur. Phasellus mi arcu, rutrum in blandit in, consectetur non risus. 
Vestibulum enim lacus, aliquam eu ultrices a, tempor ut turpis. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Curabitur rhoncus faucibus sapien, quis vulputate eros tempus 
consequat. Vivamus id metus massa. Vivamus aliquet enim quis sem viverra eu molestie elit 
cursus.</p>

    <p>Mauris at lorem massa. Aliquam risus ligula, vestibulum et placerat condimentum, 
pellentesque sit amet justo. Cras tempor sollicitudin ultrices. Aliquam sed elit sapien. 
Praesent consectetur molestie vehicula. Pellentesque quis lectus et nunc accumsan feugiat. 
Ut rhoncus aliquet libero sed rhoncus. Fusce egestas nunc eu elit vestibulum placerat. Class 
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Phasellus vitae nisi ante, id fermentum justo.</p>

    <p>Donec iaculis magna nec elit fringilla imperdiet. Proin mauris sem, pellentesque sed 
ultrices ac, luctus ac elit. Donec blandit, orci ac volutpat luctus, turpis sem malesuada 
tellus, eget porta magna nisi vitae quam. In vitae scelerisque urna. Proin ante odio, 
ultrices lobortis scelerisque at, dictum non justo. Pellentesque tincidunt congue leo 
malesuada ullamcorper. Quisque dapibus, massa dignissim gravida blandit, augue felis 
vehicula urna, et ullamcorper turpis orci sit amet nibh. Ut vitae consequat nibh. 
Pellentesque turpis justo, ultrices ac porta in, pretium quis quam. Donec purus nisi, 
dignissim vitae hendrerit vel, hendrerit ac sapien. Fusce facilisis purus a libero elementum 
ultrices. Nunc in libero congue ipsum tempor suscipit. Pellentesque pharetra pretium 
volutpat. Nam sapien arcu, viverra vitae euismod sit amet, mollis nec arcu. Phasellus at 
elit metus, sit amet tempus turpis. Phasellus mattis justo ut est varius facilisis ut et 
leo. Phasellus congue cursus est eget luctus. In eleifend diam at enim ultricies a lacinia 
mauris molestie. Nunc porttitor bibendum vulputate. Pellentesque quis risus vel mi 
pellentesque imperdiet vitae ac nunc.</p>

    </div>
    </body></html>

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box {  display: flex;  flex-flow: column;  height: 100%;}
.box .row {  border: 1px dotted grey;}
.box .row.header {  flex: 0 1 auto;  /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */}
.box .row.content {  flex: 1 1 auto;}
.box .row.footer {  flex: 0 1 40px;}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">  <div class="row header">    <p><b>header</b>      <br />      <br />(sized to content)</p>  </div>  <div class="row content">    <p>      <b>content</b>      (fills remaining space)    </p>  </div>  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

<div>  <div id="left">    left  </div>  <div id="right">    right  </div></div>

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Fill remaining vertical space - only CSS

You can do this with position:absolute; on the #second div like this :

FIDDLE

CSS :

#wrapper{
    position:relative;
}

#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

EDIT : Alternative solution

Depending on your layout and the content you have in those divs, you could make it much more simple and with less markup like this :

FIDDLE

HTML :

<div id="wrapper">
    <div id="first"></div>
</div>

CSS :

#wrapper {
    height:100%;
    width:300px;
    background-color:#9ACD32;
}
#first {
    background-color:#F5DEB3;
    height: 200px;
}

How to make CSS Grid items take up remaining space?

Adding grid-template-rows: 1fr min-content; to your .grid will get you exactly what you're after :).

.grid {  display: grid;  grid-template-columns: 1fr 3fr;  grid-template-rows: 1fr min-content;  grid-template-areas:    "one two"    "one three"}
.one {  background: red;  grid-area: one;  padding: 50px 0;}
.two {  background: green;  grid-area: two;}
.three {  background: blue;  grid-area: three;}

<div class="grid">  <div class="one">    One  </div>  <div class="two">    Two  </div>  <div class="three">    Three  </div></div>

Fill remaining vertical space with CSS using display:flex

Make it simple : DEMO

section {  display: flex;  flex-flow: column;  height: 300px;}
header {  background: tomato;  /* no flex rules, it will grow */}
div {  flex: 1;  /* 1 and it will fill whole space left if no flex value are set to other children*/  background: gold;  overflow: auto;}
footer {  background: lightgreen;  min-height: 60px;  /* min-height has its purpose :) , unless you meant height*/}

<section>  <header>    header: sized to content    <br/>(but is it really?)  </header>  <div>    main content: fills remaining space<br> x    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>    <!-- uncomment to see it break -->    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>    <!-- -->  </div>  <footer>    footer: fixed height in px  </footer></section>

Expanding to fill remaining space in a CSS Grid layout

The 100% for the 2nd column in your grid-template-columns is based on the width of the container - rather than occupying the space outstanding within the container, it will push out to the right because the 2nd column is trying to match the width of the container.

Try changing this to auto and this should rectify the issue, as it will only take up the space up to the end of the container and no further.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

Make containers respect grid but fill remaining space

You can emulate this with pseudo elements with large width:

* {  margin: 0;  padding: 0;  box-sizing: border-box;}
p {  margin-bottom: 16px;}
.wrapper {  overflow-x: hidden;  min-height: 100vh;}
.container {  border-left: 1px solid #ddd;  border-right: 1px solid #ddd;  max-width: 800px;  height: 700px;  margin: 0 auto;}
.cols {  min-height: 300px;  display: flex;}
.left {  background: linear-gradient(to right, #F9B80E, #E3342E);  flex: 0 0 66.6%;  position: relative;}
.left:before {  content: '';  background: linear-gradient(to right, #FFED21, #F9B80E);  position: absolute;  right: 100%;  width: 1000px;  top: 0;  bottom: 0;}
.right {  background: #E5E5E4;  position: relative;  padding: 20px;}
.right:after {  content: '';  background: #E5E5E4;  position: absolute;  left: 100%;  width: 1000px;  top: 0;  bottom: 0;}

<div class="wrapper">  <div class="container">    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>    <div class="cols">      <div class="left"></div>      <div class="right">        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat esse, corporis, quis accusantium, adipisci sequi animi cupiditate distinctio blanditiis consequuntur illo molestias velit dolorem qui sit voluptas. Labore cupiditate, quis.</p>      </div>    </div>  </div></div>

CSS Layout That Fills Available Space