CODEWITHSUNDEEP
csshtmlheight
Konzine
Konzine

Reputation: 181

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

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;

http://throwbackhero.com/index1.php

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;

image

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...

Upvotes: 8

Views: 57735

Answers (6)

DeadlYBlinder
DeadlYBlinder

Reputation: 116

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>

Upvotes: 1

MineAndCraft12
MineAndCraft12

Reputation: 671

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.

Upvotes: -1

alchuang
alchuang

Reputation: 3571

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.

Upvotes: 36

XSapien
XSapien

Reputation: 182

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

Upvotes: 0

MakuraYami
MakuraYami

Reputation: 3428

Add overflow:auto to the wrapper element.

Upvotes: 0

sandeep
sandeep

Reputation: 92873

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/

Upvotes: 11

Related Questions