How to Make a Div 100% of Window Height

How can I make a div 100% of window height?

tl;dr - add html, body {height:100%;} to your CSS.

---

Percentage values in CSS are inherited from some ancestor that already has height declared. In your case, you need to tell all parents of your sidebar to be 100% height. I'm assuming that #sidebarBack is a direct child of body.

Essentially, your code above is telling #sidebarBack to be 100% height of its parent. Its parent (we are assuming) is body, so you need to set height: 100%; on body as well. We can't stop there, however; body inherits height from html, so we also need to set height: 100%; on html. We can stop here, because html inherits its properties from viewport, which already has a declared height of 100%.

This also means if you end up putting the #sidebar inside another div, then that div also needs height:100%;.

Here is an Updated JSFiddle.

Changed your CSS to:

html, body {
    height:100%;
}

#sidebar {
    background: rgba(20, 20, 20, .3);
    width: 100px;
    height: 100%;
    left: 0;
    float:left;
}

section#settings {
    width:80%;   
    float:left;
    margin-left:100px;
    position:fixed;
}

Make div take 100% of browser window height

If you want to achieve a 100 view height (device height) styling on a div or other elements you can use something like this:

.full-height {  height: 100vh;}.full-width {  width: 100vw;}div {  background: green;}

<div class="full-height full-width"></div>

How to make DIV take the full height of Browser

It sounds like you want <div class="full-height-div"> to be the height of its parent.

.main-container needs flex-direction: row, not height: 100%.

In this example, <div class="full-height-div"> (outlined in red) takes on the height of its parent div.main-container (outlined in green).

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

.main-container {
    display: flex;
    flex-direction: row;    
    border: 5px solid green;
    width: 100%;
}

.full-height-div {
    height: 2000px; /* just to force it to be taller than the viewport in this example */
    border: 1px solid red;
    width: 100%;
}

<div class="main-container">
    <div class="full-height-div">
    </div>
    <div class="main-content">
    </div>
</div>

Make Div Element 100% Height of Browser Window Using CSS

Is this what you want?

html, body {  height: 100%;  margin: 0;}#thediv{  min-height:100%;  min-width:100%;  background-color:red;  display:flex;  align-items:stretch;  position:relative;}.interiordiv{  background-color:blue;  width:50px;  margin:15px auto 15px auto;}

<div id="thediv"> <div class="interiordiv">A</div> <div class="interiordiv">V</div> <div class="interiordiv">C</div> <div class="interiordiv">D</div> <div class="interiordiv">E</div></div>

how do I set height of container DIV to 100% of window height?

Add this to your css:

html, body {
    height:100%;
}

If you say height:100%, you mean '100% of the parent element'. If the parent element has no specified height, nothing will happen. You only set 100% on body, but you also need to add it to html.

How to properly set the 100% DIV height to match document/window height?

I figured it out myself with the help of someone's answer. But he deleted it for some reason.

Here's the solution:

1. remove all CSS height hacks and 100% heights
2. Use 2 nested wrappers, one in another, e.g. #wrapper and #truecontent
3. Get the height of a browser viewport. IF it's larger than #wrapper, then set inline CSS for #wrapper to match the current browser viewport height (while keeping #truecontent intact)

4. Listen on (window).resize event and ONLY apply inline CSS height IF the viewport is larger than the height of #truecontent, otherwise keep intact

   $(function(){
       var windowH = $(window).height();
       var wrapperH = $('#wrapper').height();
       if(windowH > wrapperH) {                            
           $('#wrapper').css({'height':($(window).height())+'px'});
       }                                                                               
       $(window).resize(function(){
           var windowH = $(window).height();
           var wrapperH = $('#wrapper').height();
           var differenceH = windowH - wrapperH;
           var newH = wrapperH + differenceH;
           var truecontentH = $('#truecontent').height();
           if(windowH > truecontentH) {
               $('#wrapper').css('height', (newH)+'px');
           }
   
       })          
   });
   

Why doesn't height: 100% work to expand divs to the screen height?

In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you've given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}

And your code should work fine.

* { padding: 0; margin: 0; }html, body, #fullheight {    min-height: 100% !important;    height: 100%;}#fullheight {    width: 250px;    background: blue;}

<div id=fullheight>  Lorem Ipsum        </div>

---

Related Topics