DIV - Force height 100%=/= page height?

Question

I am in a big of an issue here with a design I am trying to set up. Here is the website for a reference;

The problem is that I set the body to height: 100%; in the stylesheet and on the #wrapper div as well. The height goes off the current page height and does not take into account that there are other divs that could cause overflow.

I would like, a blank page to be the size of the browser even if the vertical size of the browser is changed, the content/wrapper div will shrink to accommodate.

Can this be done?

EDIT

Okay so clearly my original question was extremely confusing. Here is a picture;

So, in pic 1 (the left) is the issue. With height 100%; on the wrapper and content divs, it is creating that bad boy. I want it to look like picture, where the white/gray area grows/shrinks depending on the size of the browser...

Your question is really vague. Do you mean #wrapper be the size of the browser? — SMacFadyen, Mar 16 '12 at 09:43
possible duplicate of [CSS 100% height with padding/margin](http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin) — Mahmoud Gamal, Mar 16 '12 at 09:48

score 35 · Answer 1 · answered Oct 13 '15 at 03:43

35

The easiest way is simply using CSS:

height: 100vh;

Where 'vh' stands as vertical height of the browser window. Responsive to resizing of brower and mobile devices.

answered Oct 13 '15 at 03:43

alchuang

3,487
3
34
48

Saved my butt! Pretty much supported in every modern mobile and non browser! +1 – George Vasilopoulos Apr 20 '16 at 11:29
1

this doesn't work if you have to scroll and you need the div to be taller than the viewport – jojojohn Jul 09 '19 at 10:45
How I never heard of this css suffix. Nice. Worked great in bootstrap framework. Thanks! – moto_geek Jul 02 '20 at 03:26

score 11 · Answer 2 · answered Mar 16 '12 at 09:55

11

Give body,HTML & main DIV height 100%. write like this:

body,html{height:100%;}

.parent{
    min-height:100%;
    width:400px;
    margin:0 auto;
    background:red;
}

Check this http://jsfiddle.net/3VUGt/

answered Mar 16 '12 at 09:55

sandeep

91,313
23
137
155

1

Ok this is fine until we get a second div involved, http://jsfiddle.net/3VUGt/5/. Try that. See there how it created an overflow issue instead of just being the 100% of the page height? I want to avoid this. – Konzine Mar 16 '12 at 10:44

DeadlYBlinder · Answer 3 · 2018-11-28T08:57:25.477

The answer from @sandeep is correct. The best way of controlling the most basic container of display in the browser is to control html/body.

Normally, I need the same structure as you design: 1. the content should stay inside the container without overflow scroll, and 2. the container should resize as 100% while the browser is resizing.

So the basic way of doing it is:

html, body {
    height: 100%;
}

And I always set the basic container fit both height and width:

html, body {
    width: 100%;
    height: 100%;
}

NOTE: there could a margin/padding issue for some browser (as user agent stylesheet): which add a style for some of basic component like body in default (e.g. Chrome 70.0.3538.102):

body {
    display: block;
    margin: 8px;
}

Check within the developer mode, if that happens, add margin override, this also works for padding:

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

And if your page base component looks like:

<body>
    <div id="div1">
        my html content ...
    </div>
</body>

You could just do:

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

#div1 {
    position: absolute;
    width: 100%;
    height: 100%;
}

This always work for me. Hope it helps. And down here is what I guessed that the target you want to reach.

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

#div1 {
  position: relative;
  width: 60%;
  height: 100%;
  background-color: rgb(255,125,125);
  float: left;
}

#div2 {
  position: relative;
  width: 40%;
  height: 100%;
  background-color: rgb(125,255,125);
  float: left;
}

<div id="div1"> layer 1 </div>
<div id="div2"> layer 2 </div>

score 0 · Answer 4 · answered Aug 08 '15 at 03:08

There is no complete CSS solution for this problem. This CSS "issue" has been known for many years. Since CSS has grown in functionality over the years, I thought there may be a complete CSS solution by now. But alas, there is not. I have tried many things and have searched high and low, and the issue remains the same.

To my knowledge, there are only 3 solutions that do not require 3rd party libraries: absolute positioning, faux colums (two-tone repeating background) and JS.

The only two solutions that appeal to me are: faux columns and JS. I prefer the JS solution, since it makes more use of CSS. With JS you don't have to re-work the background image if you want to change the column width or color later on. It is a more adaptable and re-useable solution. The only advantage I can see for creating faux columns is that your layout doesn't break if the client disables JS.

JS solution (wrapper not required): https://jsfiddle.net/Kain52/uec9cLe4/

var side1 = document.getElementsByTagName('main')[0];
var side2 = document.getElementById('mainMenu');
var side1Height = side1.clientHeight;
var side2Height = side2.clientHeight;
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; }
else { side1.style.height = side2Height + "px"; }

JS solution (wrapper required): https://jsfiddle.net/Kain52/7udh55zq/

var wrapperHeight = document.getElementById('innerWrapper').clientHeight;
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px";
document.getElementById('mainMenu').style.height = wrapperHeight + "px";

Explanation: If you use a div wrapper then you can assign it to the height of the wrapper. If you don't use a wrapper, then you can just set the height of the shortest side to the height of the longest side. If you know that your side menu bar will always be shorter than your content, then you only need two lines of code:

var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";

score 0 · Answer 5 · edited Jul 26 '12 at 21:17

0

Add overflow:auto to the wrapper element.

edited Jul 26 '12 at 21:17

Nikola K.

7,093
13
31
39

answered Mar 16 '12 at 09:52

MakuraYami

3,398
3
16
19

score -1 · Answer 6 · answered Oct 28 '15 at 02:15

If you are okay with having some JavaScript run every millisecond on your page, and the content above the white area in question will always be the same pixel height, you could try something along the lines of this...

bodyLeadingFill = // put the size taken up by everything above the white div,
                  // including margin, padding, border, etc
function resizeElement(){
    document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);

This is, of course, assuming that the content above the white box will always be the same size no matter the font or operating system or size of the window.

I didn't actually test this myself, but the concept should work. Look out for the comments that say where to put some info.

DIV - Force height 100%=/= page height?

6 Answers6

Linked