Make a div fill the height of the remaining screen space
I am working on a web application where I want the content to fill the height of the entire screen.
The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.
I have a header div and a content div. At the moment I am using a table for the layout like so:
CSS and HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
The entire height of the page is filled, and no scrolling is required.
For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with its height set to 100%. Putting header inside content will not allow this to work.
Is there a way to achieve the same effect without using the table?
Update:
Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.
Update 2:
For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.
To solve div fill remaining height
Major browsers such as Firefox,chrome,explorer and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim. Have a look at this to check current support: http://caniuse.com/#feat=flexbox
For Example:
You can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions by using flexbox.
You need to add a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space like this:
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;
}
header
(sized to content)
content
(fills remaining space)
footer (fixed height)
Run code snippetExpand snippet to solve div fill remaining height
In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.
Answer (1)
To make a fill the height of the remaining screen space, you can use various CSS techniques depending on the layout you are aiming for. Here are some common methods:
1. Using Flexbox
Flexbox is a powerful layout tool that can easily make a fill the remaining space.
<meta</span> charset="UTF-8">
<meta</span> name="viewport" content="width=device-width, initial-scale=1.0">
Header
Content that fills remaining height
Footer
Explanation
html, body { height: 100%; margin: 0; }: Ensure the and
elements take up the full height of the viewport..container { display: flex; flex-direction: column; height: 100%; }: The container is set to be a flex container that takes up the full height of the viewport and arranges its children in a column.
.content { flex: 1; }: The content div will expand to fill the remaining space.
2. Using CSS Grid
CSS Grid is another powerful layout system that can be used to achieve the same effect.
<meta</span> charset="UTF-8">
<meta</span> name="viewport" content="width=device-width, initial-scale=1.0">
Header
Content that fills remaining height
Footer
Explanation
html, body { height: 100%; margin: 0; }: Ensure the and
elements take up the full height of the viewport..container { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }: The container is set to be a grid container that takes up the full height of the viewport. It defines three rows: the header (auto height), the content (flexible height), and the footer (auto height).
.content: This row with 1fr will expand to fill the remaining space.
3. Using Absolute Positioning
This method involves using absolute positioning to make the content fill the remaining space.
Example
<meta</span> charset="UTF-8">
<meta</span> name="viewport" content="width=device-width, initial-scale=1.0">
Header
Content that fills remaining height
Footer