CSS Div stretch 100 page height

Question

I have a navigation bar on the left hand side of my page  and I want it to stretch to 100  of the page height  Not just the height of the viewport  but including the areas hidden until you scroll  I don t want to use javascript to accomplish this   Can it be done in HTML CSS

User · Answer

Use position absolute   Note that this isn t how we are generally used to using position absolute which requires manually laying things out or having floating dialogs   This will automatically stretch when you resize the window or the content   I believe that this requires standards mode but will work in IE6 and above   Just replace the div with id  thecontent  with your content  the specified height there is just for illustration  you don t have to specify a height on the actual content    lt div style  position  relative  width  100    gt         lt div style  position  absolute  left  0px  right  33   bottom  0px  top  0px  background-color  blue  width  33    id  navbar  gt nav bar lt  div gt         lt div style  position  relative  left  33   width  66   background-color  yellow   id  content  gt            lt div style  height  10000px   id  thecontent  gt  lt  div gt         lt  div gt   lt  div gt    The way that this works is that the outer div acts as a reference point for the nav bar   The outer div is stretched out by the content of the  content  div   The nav bar uses absolute positioning to stretch itself out to the height of its parent   For the horizontal alignment we make the content div offset itself by the same width of the navbar   This is made much easier with CSS3 flex box model  but that s not available in IE yet and has some of it s own quirks

User · Answer

You can cheat using Faux Columns Or you can use some CSS trickery

User · Answer

margin  0    html  body   height  90      content   min-height  100   height  auto  important  height  100   margin  0 auto

User · Answer

Simple  just wrap it up in a table div     The HTML    lt div class  fake-table  gt      lt div class  left-side  gt       some text     lt  div gt      lt div class  right-side  gt       My Navigation or something     lt  div gt   lt  div gt    The CSS    lt style gt     fake-table display table width 100  height 100      left-size width 30  height 100      left-size width 70  height 100      lt  style gt

User · Answer

With HTML5  the easiest way is simply to do height  100vh  Where  vh  stands for viewport height of the browser window  Responsive to resizing of browser and mobile devices

User · Answer

It s simple using a table    lt html gt    lt head gt       lt title gt 100  Height test lt  title gt   lt  head gt    lt body gt       lt table style  float  left  height  100   width  200px  border  1px solid red  gt           lt tbody gt               lt tr gt                   lt td gt Nav area lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt       lt div style  border  1px solid green   gt Content blabla    text          lt br   gt  text          lt br   gt  text          lt br   gt  text          lt br   gt       lt  div gt   lt  body gt    lt  html gt    When DIV was introduced  people were so afraid of tables that the poor DIV became the metaphorical hammer

User · Answer

I ran into the same problem as you  I wanted to make a DIV as background  why  because its easy to manipulate div through javascript  Anyways three things I did in the css for that div   CSS         position absolute   display block   height 100    width 100    top 0px   left 0px   z-index -1

User · Answer

If you are targeting more modern browsers  life can be very simple  try    elem          height  100vh       if you need it at 50  of the page  replace 100 with 50

User · Answer

x000D   x000D    x000D             document body onload   function      x000D                  var textcontrol   document getElementById  page    x000D                  textcontrol style height    window innerHeight     px   x000D                x000D   lt html gt  x000D   lt head gt  lt title gt  lt  title gt  lt  head gt  x000D   lt body gt  x000D   x000D   lt div id  page  style  background green   gt  x000D   lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I want to cover the whole web page before prompting a modal popup  I tried many methods using CSS and Javascript but none of them help until I figure out the following solution  It works for me  I hope it helps you too    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D    lt head gt  x000D     lt style gt  x000D     html  body   x000D         margin  0px 0px  x000D         height 100   x000D       x000D             x000D              div full-page   x000D                  position  fixed  x000D                  top  0  x000D                  bottom  0  x000D                  width  100   x000D                  height  100   x000D                  background-color   000  x000D                  opacity 0 8  x000D                  overflow-y  hidden  x000D                  overflow-x  hidden  x000D                x000D             x000D              div full-page div avoid-content-highlight   x000D                  position  relative  x000D                  width  100   x000D                  height  100   x000D                x000D             x000D              div modal-popup   x000D                  position  fixed  x000D                  top  20   x000D                  bottom  20   x000D                  left  30   x000D                  right  30   x000D                  background-color   FFF  x000D                  border  1px solid  000  x000D                x000D     lt  style gt  x000D     lt script gt  x000D     x000D        Polling for the sake of my intern tests x000D     var interval   setInterval function     x000D      if document readyState      complete     x000D       clearInterval interval   x000D       isReady    x000D            x000D        1000   x000D      x000D     function isReady     x000D      document getElementById  btn1   disabled   false  x000D      document getElementById  btn2   disabled   false  x000D       x000D         disable scrolling x000D                  document getElementsByTagName  body   0  style overflow    hidden   x000D       x000D      x000D     function promptModalPopup     x000D                  document getElementById  div1   style visibility    visible   x000D                  document getElementById  div2   style visibility    visible   x000D       x000D         disable scrolling x000D                  document getElementsByTagName  body   0  style overflow    hidden   x000D                x000D             x000D              function closeModalPopup     x000D                  document getElementById  div2   style visibility    hidden     x000D                  document getElementById  div1   style visibility    hidden   x000D       x000D         enable scrolling x000D                  document getElementsByTagName  body   0  style overflow    scroll   x000D                x000D     lt  script gt  x000D     x000D    lt  head gt  x000D    lt body id  body  gt  x000D     lt div id  div1  class  full-page  gt  x000D      lt div class  avoid-content-highlight  gt  x000D                   x000D               lt  div gt  x000D     lt  div gt  x000D           lt button id  btn1  onclick  promptModalPopup    disabled gt Prompt Modal Popup lt  button gt  x000D     lt div id  demo  gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D      lt h2 gt Original content lt  h2 gt  x000D     lt  div gt  x000D           lt div id  div2  class  modal-popup  gt  x000D              I am on top of all other containers x000D               lt button id  btn2  onclick  closeModalPopup    disabled gt Close lt  button gt  x000D           lt div gt  x000D    lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Good luck  -

User · Answer

Here is the solution I finally came up with when using a div as a container for a dynamic background    Remove the z-index for non-background uses  Remove left or right for a full height column  Remove top or bottom for a full width row    EDIT 1  CSS below has been edited because it did not show correctly in FF and Chrome  moved position relative to be on the HTML and set the body to height 100  instead of min-height 100    EDIT 2  Added extra comments to CSS  Added some more instructions above   The CSS   html      min-height 100     make sure it is at least as tall as the viewport        position relative    body      height 100      force the BODY element to match the height of the HTML element       cloud-container      position absolute      top 0      bottom 0      left 0      right 0      overflow hidden      z-index -1     Remove this line if it s not going to be a background         The html    lt  doctype html gt   lt html gt   lt body gt       lt div id  cloud-container  gt  lt  div gt   lt  body gt   lt  html gt    Why   html min-height 100  position relative     Without this the cloud-container DIV is removed from the HTML s layout context  position  relative ensures that the DIV remains inside the HTML box when it is drawn so that bottom 0 refers to the bottom of the HTML box  You can also use height 100  on the cloud-container as it now refers to the height of the HTML tag and not the viewport

User · Answer

I had a similar problem and the solution was to do this    cloud-container      position absolute      top 0      bottom 0      I wanted a page-centered div with height 100  of page height  so my total solution was    cloud-container      position absolute      top 0      bottom 0      left 0      right 0       width  XXXpx    otherwise div defaults to page width       margin  0 auto    horizontally centers div       You might need to make a parent element  or simply  body   have position  relative

[css] CSS Div stretch 100% page height

Examples related to css

Examples related to height

Examples related to max

Examples related to stretch