DIV - Power Height 100% = / = Page Height?

Question

I have a problem with the design I'm trying to customize. Here is the website for reference;

http://throwbackhero.com/index1.php

The problem is that I set the body to a height: 100%; in the stylesheet and on the #wrapper div. The height decreases from the current page height and does not take into account that there are other divs that can cause overflow.

I would like the blank page to be the size of the browser, even if the vertical size of the browser has changed, the content / wrapper of the div will be reduced to fit.

Can this be done?

EDIT

Ok, so my original question was very confusing. Here is the image:

So, in pic 1 (left) is the problem. With a height of 100%; on the wrapper and content divs, he creates this bad boy. I want it to look like a picture where the white / gray area increases / decreases depending on the size of the browser ...

Answer 1

The easiest way is to simply use CSS:

height: 100vh; 

Where "vh" indicates the vertical height of the browser window. In response to resizing browsers and mobile devices.

Answer 2

Give the body, HTML and basic div height 100% . write like this:

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

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

Answer 3

Try using min-height:100% to solve your problem. (I did not quite understand your question, though;))

Answer 4

Add overflow:auto to the wrapper element.

Answer 5

There is no complete solution for CSS for this problem. This CSS "question" has been known for many years. Since CSS has grown in functionality over the years, I thought there might be a complete CSS solution so far. But alas, no. I tried many things and searched high and low, and the problem remained the same.

As far as I know, there are only 3 solutions for which third-party libraries are not required: absolute positioning, artificial codes (two-color repeating background) and JS.

The only two solutions that I like are artificial columns and JS. I prefer the JS solution, as it uses CSS more. With JS, you do not need to re-work with the background image if you want to change the column width or color later. This is a more adaptable and reusable solution. The only advantage I see for creating faux columns is that your layout does not break if the client disables JS.

JS solution (no wrapper 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 (shell 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 wrapper div, you can assign it to the height of the wrapper. If you are not using a wrapper, you can simply set the height of the shortest side to the height of the longest side. If you know that your 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"; 

Answer 6

If everything is fine with you, if any kind of JavaScript will work on your page in a millisecond, and the content over the white area will always be the same pixel height, you can try something in this direction ...

 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); 

It is, of course, assumed that the content above the white box will always be the same size regardless of font, operating system or window size.

I myself have not actually tested this, but the concept should work. Stay tuned for comments that say where to post some information.