How can an html element fill out 100% of the remaining screen height, using css only?

Question

I have a header element and a content element:

#header
#content

I want the header to be of fixed height and the content to fill up all the remaining height available on the screen, with overflow-y: scroll;.

It this possible without Javascript?

Sebastien H. · Answer 1 · 2018-11-14T17:25:14.233

440

forget all the answers, this line of CSS worked for me in 2 seconds :

height:100vh;

1vh = 1% of browser screen height

source

For responsive layout scaling, you might want to use :

min-height: 100vh

[update november 2018] As mentionned in the comments, using the min-height might avoid having issues on reponsive designs

[update april 2018] As mentioned in the comments, back in 2011 when the question was asked, not all browsers supported the viewport units. The other answers were the solutions back then -- vmax is still not supported in IE, so this might not be the best solution for all yet.

edited Nov 14 '18 at 17:25

answered Apr 12 '16 at 10:30

Sebastien H.

6,818
2
28
36

10

This is the simplest answer, as you don't need to set the height of all the parent elements to 100%. Here's the current support for vh - http://caniuse.com/#feat=viewport-units - iOS apparently might need a workaround, as "vh on iOS is reported to include the height of the bottom toolbar in the height calculation". – Brian Burns May 10 '16 at 18:01
2

WOW, nice find! Look at all these people with over-complicated answers. – NoName Dec 21 '16 at 20:50
11

When the question was asked in 2011, none of the major browsers supported viewport units. Those "over-complicated answers" were the only options back then. – JJJ Apr 03 '17 at 16:07
this must be the simplest and clearest, most efficent answer! – Thien Nhan Nguyen Jan 23 '18 at 10:27
6

Minor suggestion that a `min-height: 100vh` would be a lot better. It would scale for responsive designs as well. – Wiggy A. Apr 13 '18 at 12:29
@WiggyA. Your suggestion helped me. I was getting reponsiveness issues with `height: 100vh`. Thanks :) – Arshad Jul 29 '18 at 17:31
This works for simple layouts, but when my div starts somewhere after top of screen, it makes the div overflow the viewport (which is logical) – Bernardo Dal Corno Aug 02 '18 at 19:12
13

This does not answer the question asked, this would take up 100% of the viewport. He does not want this becuase his header will take up x % of the viewport, as such the other answers are correct. – 4cody Dec 15 '18 at 23:38
1

Same complaint as 4cody. This does not answer the question where fill >remaining< height is required. This results in a static element that is the height of the screen. – TomDK Aug 08 '19 at 01:40
Is there any solution for **width** like this? – mgh Oct 12 '19 at 10:15
I feel like this solution isn't 100% (no pun intended) correct as it doesn't answer the question. When you do 100vh, it takes then entire size of your viewport and adds it on. For example, if you have a header height of 86px and you want to add a dropdown menu that covers the rest of the screen, you will have a dropdown screen that will go under the viewport by 86px. You can try using the css attribute `calc()` to get a desired result if you know the explicit height. `.menu { height: calc(100vh - 86px) }` would get you a result that you would need but only if you know the explicit value. – Lewis Menelaws Nov 06 '19 at 17:26

BentOnCoding · Accepted Answer · 2018-10-11T03:36:37.180

100

The trick to this is specifying 100% height on the html and body elements. Some browsers look to the parent elements (html, body) to calculate the height.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

edited Oct 11 '18 at 03:36

answered Sep 09 '11 at 06:32

BentOnCoding

27,307
14
64
92

2

I tried all solution but only [this](https://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex) solved my issue. – Alex Oct 10 '18 at 17:30
1

@Alex if this works for all the browsers you are targeting, then by all means go ahead and implement it. Everyone's requirements are different. – BentOnCoding Oct 11 '18 at 03:34

Faron · Answer 3 · 2015-09-09T22:01:14.227

39

Actually the best approach is this:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

This solves everything for me and it helps me to control my footer and it can have the fixed footer no matter if page is being scrolled down.

Technical Solution - EDITED

Historically, 'height' is tricky thing to mold with, compared to 'width', the easiest. Since css focus on <body> for styling to work. The code above - we gave <html> and <body> a height. This is where magic comes into picture - since we have 'min-height' on playing table, we are telling browser that <body> is superior over <html> because <body> holds the min-height. This in turn, allows <body> to override <html> because <html> had height already earlier. In other words, we are tricking browser to "bump" <html> off the table, so we could style independently.

edited Sep 09 '15 at 22:01

answered Jan 19 '13 at 01:32

Faron

1,255
11
20

1

Oh my god it's a miracle! – Geoff Jul 28 '13 at 22:05
Like miracle, it works! But please: why `min-height` and `height`? – Joy Apr 20 '15 at 03:10
2

@ShaojiangCai - Historically, 'height' is tricky thing to mold with, compared to 'width', the easiest. Since css focus on `` for styling to work. This code: we gave `` and `` a height. This is where magic comes into picture - since we have 'min-height' on playing table, we are telling server that `` is superior over `` because `` holds the min-height. This in turn, allows `` to override `` because `` had height already earlier. In other words, we are tricking server to "bump" `` off the table, so we could style independently. – Faron May 29 '15 at 20:25
2

@Faron It seems like 'browser' would be a better word choice here instead of 'server'. ;) – Eddie Sep 09 '15 at 15:59
@EunLeem ... I agree with you on how I could have chose the proper wording to address this. Thanks for the "elbow-bump" tip. Updated my answer accordingly. – Faron Sep 09 '15 at 22:03
This didn't quite work for one particular page I was working on. However, I fixed it by modifying the `"html"` `CSS` declaration above to `html, body { height: 100%; }` and that permitted the `height` to function properly. I guess I had to trick it more. – user3621633 Nov 12 '15 at 06:14

score 26 · Answer 4 · answered Jun 14 '18 at 14:33

26

You can use vh on the min-height property.

min-height: 100vh;

You can do as follows, depending on how you are using the margins...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

answered Jun 14 '18 at 14:33

Almeida Cavalcante

589
7
10

score 11 · Answer 5 · edited Jul 26 '17 at 02:43

The accepted solution will not actually work. You will notice that the content div will be equal to the height of its parent, body. So setting the body height to 100% will set it equal to the height of the browser window. Let's say the browser window was 768px in height, by setting the content div height to 100%, the div's height will in turn be 768px. Thus, you will end up with the header div being 150px and the content div being 768px. In the end you will have content 150px below the bottom of the page. For another solution, check out this link.

score 8 · Answer 6 · answered Apr 21 '14 at 15:53

8

With HTML5 you can do this:

CSS:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML:

<header>blabablalba </header>
<section> Content </section>

answered Apr 21 '14 at 15:53

Miguel

81
1
1

1

Beware of using calc on percentage height. Firefox won't work with this correctly unless all parents have a set height. – TomDK Aug 08 '19 at 01:41

hasher · Answer 7 · 2018-07-20T13:52:02.117

For me, the next worked well:

I wrapped the header and the content on a div

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

I used this reference to fill the height with flexbox. The CSS goes like this:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

For more info about the flexbox technique, visit the reference

Dmitry Babich · Answer 8 · 2020-01-28T07:04:42.230

Please let me add my 5 cents here and offer a classical solution:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>

This will work in all browsers, no script, no flex. Open snippet in full page mode and resize browser: desired proportions are preserved even in fullscreen mode.

Note:

Elements with different background color can actually cover each other. Here I used solid border to ensure that elements are placed correctly.
idHeader.height and idContent.top are adjusted to include border, and should have the same value if border is not used. Otherwise elements will pull out of the viewport, since calculated width does not include border, margin and/or padding.
left:0; right:0; can be replaced by width:100% for the same reason, if no border used.
Testing in separate page (not as a snippet) does not require any html/body adjustment.
In IE6 and earlier versions we must add padding-top and/or padding-bottom attributes to #idOuter element.

To complete my answer, here is the footer layout:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

And here is the layout with both header and footer:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

score 1 · Answer 9 · answered May 05 '14 at 18:22

1

You can also set the parent to display: inline. See http://codepen.io/tommymarshall/pen/cECyH

Be sure to also have the height of html and body set to 100%, too.

answered May 05 '14 at 18:22

tommymarshall

21
4

Link-only answers are discouraged. Please try to summarize the link content in your answer – ReinstateMonica3167040 Jul 27 '17 at 00:19

jumps4fun · Answer 10 · 2018-01-04T10:59:33.120

The accepted answer does not work. And the highest voted answer does not answer the actual question. With a fixed pixel height header, and a filler in the remaining display of the browser, and scroll for owerflow. Here is a solution that actually works, using absolute positioning. I also assume that the height of the header is known, by the sound of "fixed header" in the question. I use 150px as an example here:

HTML:

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>

CSS:(adding background-color for visual effect only)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

For a more detailed look how this works, with actual content inside the #Content, have a look at this jsfiddle, using bootstrap rows and columns.

"fixed pixel height header" -> this exactly! The `bottom` property made sure that the `#Content` stays stuck at the end of the page. I appreciate you taking the time to explain it. — Armfoot, Feb 07 '19 at 15:08

Fezal halai · Answer 11 · 2018-05-18T06:09:15.187

1

In this instance I want my main content div to be liquid height so that the whole page takes up 100% of the browser height.

height: 100vh;

edited May 18 '18 at 06:09

answered May 18 '18 at 06:02

Fezal halai

756
7
14

score 0 · Answer 12 · answered May 31 '16 at 15:25

Unless you need to support IE 9 and below, I would use flexbox

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

You also need to get body to fill the whole page

body, html{ width:100%; height:100%; padding: 0; margin: 0;}

score 0 · Answer 13 · answered Oct 07 '19 at 13:45

0

#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}

answered Oct 07 '19 at 13:45

Jazib Khan

31
4

score 0 · Answer 14 · edited Jul 26 '17 at 01:35

0

CSS PLaY | cross browser fixed header/footer/centered single column layout

CSS Frames, version 2: Example 2, specified width | 456 Berea Street

One important thing is that although this sounds easy, there's going to be quite a bit of ugly code going into your CSS file to get an effect like this. Unfortunately, it really is the only option.

edited Jul 26 '17 at 01:35

ReinstateMonica3167040

732
9
27

answered Sep 09 '11 at 06:25

Joe

15,669
4
48
83

Link-only answers are discouraged. Try including the code in your answer. – ReinstateMonica3167040 Jul 25 '17 at 23:26

score -1 · Answer 15 · answered Sep 28 '15 at 15:18

The best solution I found so far is setting a footer element at the bottom of the page and then evaluate the difference of the offset of the footer and the element we need to expand. e.g.

The html file

<div id="contents"></div>
<div id="footer"></div>

The css file

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

The js file (using jquery)

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

You might also like to update the height of the contents element on each window resize, so...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});

score -3 · Answer 16 · edited Jul 26 '17 at 01:35

-3

Have you tried something like this?

CSS:

.content {
    height: 100%;
    display: block;
}

HTML:

<div class=".content">
<!-- Content goes here -->
</div>

edited Jul 26 '17 at 01:35

ReinstateMonica3167040

732
9
27

answered Sep 09 '11 at 06:23

Rahul Choudhary

3,789
2
30
30

How can an html element fill out 100% of the remaining screen height, using css only?

16 Answers16

Note:

The html file

The css file

The js file (using jquery)

Linked