how to make a div a percentage of the overall body height?

Question

I'm trying a more fluid design.

I want specific divs to be a percentage of the overall body. I also want to set fluid / liquid padding within each div.

<body>
   <div class='image'></div>
   <div class='fourty'></div>
   <div class='sixty'></div>
</body>

CSS:

body {
 margin-top: 85px;
 min-height: 100%;
}

.image {
  content: image_url('something.jpg');
  width: 100%;
  height: auto;
}

/*I'm assuming the padding I'm setting is a percentage of the .fourty
  div not the overall body. Granted, width is 100%.*/
.fourty{
  padding: 4% 8%;
  min-height: 40%;
  width: 100%;
}

.sixty{
  padding: 4% 8%;
  min-height: 60%;
  width: 100%;
 }

The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.

How do I correct / achieve this? I'm open to a JS solution, but would be more interested as to how to accomplish this in CSS.

Generally body is only as tall as the content, that is where people run into issues with height a lot. Is your parent elements height defined? — Marie, Dec 19 '15 at 01:28
look into using `vh` which gets the viewport height. So `height: 100vh` — Lucas, Dec 19 '15 at 01:30
I tried setting height on the html as well - no change. Toni, the parent element of the body? Is what you're saying: every element on my page is percentage based, so the browser doesn't know what to make the body 100% of? — someoneHere, Dec 19 '15 at 01:31
I think I may have figured out my own question.. Would the best solution just to be to set a min height, then the div would have to adjust to child content within? So, my content is text-based. Set that to ems based off the body, and set margin and padding to percentages within the div... — someoneHere, Dec 19 '15 at 01:41
http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work may help you — Blag, Dec 19 '15 at 01:48

score 1 · Answer 1 · answered Dec 19 '15 at 02:29

As far as CSS goes, there are no styles that you can apply to make an element's height equal to a certain percentage of the total document (body) height.

CSS does, however, offer you options to style an element's heights to a certain percentage of the viewport height (using VH units), but since this does not achieve your goal, I'll leave you with a javascript answer that does.

Relevant javascript functions:

function getDocumentHeight() {
  return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
};

function setDivHeight(target, percentage) {
    var desiredHeight = getDocumentHeight() * (percentage/100)
    target.style.height = desiredHeight + 'px';
};

To set the height initially and on viewport resizes:

var targetDiv = document.getElementById('target');

setDivHeight(targetDiv);

window.addEventListener('resize', setDivHeight.bind(null, targetDiv))

*As far as CSS goes, there are no styles that you can apply to make an element's height equal to a certain percentage of the total document (body) height.* -- This is not correct. Percentage heights work just fine when used properly. — Michael Benjamin, Dec 19 '15 at 11:40
@Michael_B, could you explain how I can set an element's height to a percentage of the total document? I can only imagine hacks that would require someone to alter their HTML in a manner that almost always ends up to their detriment. CSS is unaware of total document height. — AJeezy9, Dec 22 '15 at 19:27
There is no problem (or hack needed) when using percentage heights on HTML elements. You just need to specify the height of the parent in most cases. http://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Dec 22 '15 at 19:31

score 1 · Answer 2 · edited May 23 '17 at 10:27

The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.

That is correct. The reason is that your code is in violation of the spec.

From the W3C height property definition:

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.

auto
The height depends on the values of other properties.

In other words, if you're going to use percentage values, you'll need to use the height property from top to bottom.

From the browser's perspective, min-height (and max-height) don't adhere to this rule and, therefore, as the spec says, they compute to auto.

DEMO (with your code, revised)

Read more here: Working with the CSS height property and percentage values

As an aside, I think its safe to say that the height definition is thoroughly obsolete. It hasn't been updated since 1998 (CSS2) and there are many ways for establishing the height of a box. Confining percentage heights to only the height property doesn't make much sense anymore.

Firefox seems to agree. Recent versions now accept flex heights, as well. See examples here:

how to make a div a percentage of the overall body height?

2 Answers2