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

User · Answer

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

_x000D_

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

_x000D_

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

_x000D_

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:

_x000D_

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

_x000D_

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

_x000D_

And here is the layout with both header and footer:

_x000D_

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

_x000D_

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

_x000D_

User · Answer

Very simple    content       max-height  100

User · Answer

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    lt html gt       lt body gt           lt div id  Header  gt           lt  div gt           lt div id  Content  gt                 lt  div gt       lt  body gt   lt  html gt    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

User · Answer

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     lt html gt       lt body gt           lt div id  Header  gt           lt  div gt           lt div id  Content  gt           lt  div gt       lt  body gt   lt  html gt   html  body       height  100      Header       width  960px      height  150px     Content       height  100       width  960px

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   lt div id  contents  gt  lt  div gt   lt div id  footer  gt  lt  div gt    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

User · Answer

For me  the next worked well   I wrapped the header and the content on a div   lt div class  main-wrapper  gt       lt div class  header  gt        lt  div gt       lt div class  content  gt        lt  div gt   lt  div gt    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

User · Answer

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    lt header gt blabablalba  lt  header gt   lt section gt  Content  lt  section gt

User · Answer

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  lt body gt  for styling to work  The code above - we gave  lt html gt  and  lt body gt  a height  This is where magic comes into picture - since we have  min-height  on playing table  we are telling browser that  lt body gt  is superior over  lt html gt  because  lt body gt  holds the min-height  This in turn  allows  lt body gt  to override  lt html gt  because  lt html gt  had height already earlier  In other words  we are tricking browser to  bump   lt html gt  off the table  so we could style independently

User · Answer

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

User · Answer

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

User · Answer

Have you tried something like this   CSS    content       height  100       display  block      HTML    lt div class   content  gt   lt  -- Content goes here -- gt   lt  div gt

User · Answer

Header   width  960px  height  150px      Content   min-height 100vh  height  100   width  960px

User · Answer

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

User · Answer

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

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

Note:

Examples related to html

Examples related to css