Set div to remaining height using CSS with unknown height divs above and below
A cross-browser solution derived from Dan Dascalescu answer:
http://jsfiddle.net/Uc9E2
html, body { margin: 0; padding: 0; height: 100%;}.l-fit-height { display: table; height: 100%;}.l-fit-height-row { display: table-row; height: 1px;}.l-fit-height-row-content { /* Firefox requires this */ display: table-cell;}.l-fit-height-row-expanded { height: 100%; display: table-row;}.l-fit-height-row-expanded > .l-fit-height-row-content { height: 100%; width: 100%;}@-moz-document url-prefix() { .l-scroll { /* Firefox requires this to do the absolute positioning correctly */ display: inline-block; }}.l-scroll { overflow-y: auto; position: relative; height: 1000px;}.l-scroll-content { position: absolute; top: 0; bottom: 0; height: 1000px; min-height:100px;}<div class="l-fit-height"> <section class="l-fit-height-row"> <div class="l-fit-height-row-content"> <p>Header</p> </div> </section> <section class="l-fit-height-row-expanded"> <div class="l-fit-height-row-content l-scroll"> <div class="l-scroll-content"> <p>Foo</p> </div> </div> </section> <section class="l-fit-height-row"> <div class="l-fit-height-row-content"> <p>Footer</p> </div> </section></div>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>CSS: How to make div fill remaining height inside of a flex-child
It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.
Html:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"> auto div</div>
<div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
</div>
</div>
CSS:
.flex-parent-row {
display: flex;
flex-direction: column;
height: 200px;
width: 500px;
border: 1px solid #000;
}
.flex-child {
border: 1px solid #000;
background-color: red;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.auto-height {
background: orange;
}
.i-want-this-one-to-fill-remaining-height {
flex-grow: 1;
background-color: lightblue;
}
If you need additional help please provide more code.
How to fill 100% of remaining height?
You should be able to do this if you add in a div (#header below) to wrap your contents of 1.
If you float
#header, the content from#someidwill be forced to flow around it.Next, you set
#header's width to 100%. This will make it expand to fill the width of the containing div,#full. This will effectively push all of#someid's content below#headersince there is no room to flow around the sides anymore.Finally, set
#someid's height to 100%, this will make it the same height as#full.
JSFiddle
HTML
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
CSS
html, body, #full, #someid {
height: 100%;
}
#header {
float: left;
width: 100%;
}
Update
I think it's worth mentioning that flexbox is well supported across modern browsers today. The CSS could be altered have #full become a flex container, and #someid should set it's flex grow to a value greater than 0.
html, body, #full {
height: 100%;
}
#full {
display: flex;
flex-direction: column;
}
#someid {
flex-grow: 1;
}
How do I make a div fill remaining height when there's a variable sized header?
Using a table was the first thing that came to mind: http://jsfiddle.net/gWmtD/9/
I used inline CSS because it was easier for me to prototype with and you can easily see the changes I've made.
<div id="page">
<aside id="infoBar" style="overflow-y: auto;">
<table style="height:100%; width:100%;">
<tr>
<td>
<header>
Variable Sized Header
</header>
</td>
</tr>
<tr>
<td style="height:100%; width:100%;">
<div id="infoContent">
<div>First Content Item</div>
<div>Second Content Item</div>
<div>Third Content Item</div>
</div>
</td>
</tr>
</table>
</aside>
<footer id="footer">Footer</footer>
</div>
Edit: To enable the scrollbar for the aside when you scrunch the page down in FireFox, add the following property:
overflow-y: auto;
Which will make the y scrollbar appear only when it's needed. This happens by default in Chrome, and can be turned off in Chrome by setting:
overflow-y: none;
How can I have a div/span fill in the remaining width/height of the page, and stay fixed in position?
My Solution would be to use 2 wrapper divs:
- body-wrapper: contains header and content-wrapper
- content-wrapper: contains navbar and content
The wrapper have paddings and are set to 100% width, 100% height AND box-sizing:border-box;, that´s very important. Normally you would get 100% + the padding. With box-sizing:border-box; the element will remain to 100%.
body,html { height: 100%;}
body { background-color: #eee; margin: 0;}
#body-wrapper { position: relative; height: 100%; padding-top: 50px; background-color: orange}
#header { position: absolute; top: 0; left: 0; width: 100%; height: 50px; padding: 15px 0 0 120px; background-color: #bababa;}
img { position: absolute; top: 0; left: 0;}
#content-wrapper { position: relative; height: 100%; width: 100%; padding-left: 100px;}
#navbar { position: absolute; display: block; top: 0; left: 0; width: 100px; height: 100%; padding: 10px; color: #fff; background-color: #333}
#content { position: relative; width: 100%; height: 100%; padding: 1px 20px; overflow-y: auto;}
.border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}<div id="body-wrapper" class="border-box"> <div id="header" class="border-box"> <img src="http://placehold.it/100x50">AnimeDB </div> <div id="content-wrapper" class="border-box"> <div id="navbar" class="border-box">navbar</div> <div id="content" class="border-box"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> </div></div>In a sequence of sibling divs, can you set the height to the highest value?
Simply make use of CSS' table display.
Take the following example markup:
<div>
<figure>Example one</figure>
<figure>This is example twooooo</figure>
<figure>3</figure>
</div>
If you want all three figure elements to remain a constant height whilst ensuring they never escape outside the boundaries of the div container, simply:
div {
display:table;
}
div > figure {
display:table-cell;
}
All three figure elements will now remain the same height - the height of the element with the most content or the min-height of the containing divider, whichever is greater.
Here's a JSFiddle example showing this in action. Notice how I've given the div a grey background colour and that the figure elements never escape outside the boundary.
For browser support, see: http://caniuse.com/#feat=css-table
Related Topics
Bootstrap Dropdown Clipped by Overflow:Hidden Container, How to Change The Container
How to Render Svg Elements with Crisp Edges While Still Keeping Anti-Aliasing
Visual Studio (2012 and Lower) Deletes CSS Properties
Preventing Fixed Footer from Overlapping Content
Styling The Placeholder in a Textfield
HTML5 Translate Method, How to Reset to Default
Onserverclick Event Handler Not Called If Using Onclick
Edit Line Thickness of CSS 'Underline' Attribute
How to Make a Div 100% of Page (Not Screen) Height
How to Make a Transparent Border Using CSS
Inject <Input> in Innerhtml Angular 2
Image Overlay on Responsive Sized Images Bootstrap