100% Height - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

100% Height

height=100% does NOT work; height=700px works!

RezaRob

4:43 am on Dec 12, 2011 (gmt 0)

10+ Year Member

I've looked at this thread:
[webmasterworld.com...]

and did this(you're supposed to get a solid blue DIV on the left and a scrolling, red, 100% height DIV on the right.)
-------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>title</title>

<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:700px;
overflow:hidden;
}
</style>
</head>

<body>
<div style="position:absolute;width:20%; height:100%; background-color:blue;">
</div>

<div style="float:right; width:70%;height:100%; overflow: scroll;background-color:red;">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

jjjjjjjjj

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

</body>
--------------------------------------------

With body{height:700px} it works great! But if you change that to body{height:70%} it's totally broken(as if body height wasn't set.) Very strange! Behaves almost similarly on Chrome and Firefox Ubuntu 10.04. Why is that?

[edited by: alt131 at 6:23 am (utc) on Dec 12, 2011]
[edit reason] Side Scroll [/edit]

lucy24

8:18 am on Dec 12, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

What happens if your user's window is something other than 700 pixels high?

I've had the best results setting a height value on the html rather than on the body.

html {min-height: 100%;}

does what it's intended to do (keep a footer at the bottom of the screen even if the text is short).

And then once you've got a single block with constrained height, anything inside that block-- including body inside html-- can be set proportionally.

RezaRob

8:48 am on Dec 12, 2011 (gmt 0)

10+ Year Member

Fantastic Lucy, thank you. html {height: 100%;} did the job, although I'm not sure why html {min-height: 100%;} did not work!

What happens if your user's window is something other than 700 pixels high?

Exactly, that was my question. If you glance at it again, I complained that body{height:70%;} does NOT work(and BTW, I still don't understand why it doesn't) despite the fact that
body{height:700px;} DOES work!

But thanks Lucy. :)

birdbrain

9:28 am on Dec 12, 2011 (gmt 0)

Hi there RezaRob,

you must set a height value to the html.

The body may then take a percentage value of it's parent.

And the children of the body, in turn, can then take percentage values of their parent.

Hence the "Cascading" in C.S.S. ;)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>title</title>

<style type="text/css">
html,body {
   margin:0;
   padding:0;
   height:100%;
 }
#left-container {
   float:left;
   width:20%;
   height:100%;
   overflow:auto;
   background-color:#00f;
 }
#right-container {
   float:right;
   width:70%;
   height:100%;
   overflow:auto;
   background-color:#f00;
 }
</style>

</head>
<body>

<div id="left-container"></div>

<div id="right-container"></div>

</body> 
</html>

birdbrain

lucy24

9:31 am on Dec 12, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I think it's because it has to be 70% of something. The only thing bigger than the body is the html, so if that hasn't been set, then you're left with "70% of whatever the browser feels like" ;)

Height is always trickier than width, because html by its nature is vertically scrolling. That means its height is whatever it needs to be, while the width is determined either by content or by user's window-- generally whichever is bigger.

Food for thought, there. If html had been developed by people who used vertical rather than horizontal writing, would web pages have a fixed height combined with unlimited horizontal scrolling?

Paul_o_b

9:48 am on Dec 12, 2011 (gmt 0)

10+ Year Member

Fantastic Lucy, thank you. html {height: 100%;} did the job, although I'm not sure why html {min-height: 100%;} did not work!

You can't base a static elements height on a parent that has a min-height only defined (or where its height is defined by its content only). That's just the way css works.

To use a a percentage height the parent must also have a height defined. If the parent has no height defined then the percentage height of the child will collapse to height :auto (the default).

Therefore to get an initial 100% height you would need to set both html and body to height:100% and then the first container on the page could be set to min-height:100% and would reach the bottom. You cannot however nest any further elements inside this with percentage or min-height percentages as they would collapse to auto for the reasons mentioned above.

You can't have multiple height:100% high elements across the page unless you are going to set them all to scroll (as in the example above - which in most cases is ugly and unusable). Otherwise they will never grow and will spill out of their container.

if you use min-height:100% on multiple separate elements then they can grow but they will not grow together like table-cells.

If all this is an exercise in getting full height equal columns then you need to use other approaches or use things like (faux columns) or display:table for IE8+ or one of the many negative margin tricks around (just google equal columns in css to see various methods).

100% height is not as tricky as some people make it out. It just means an element will be 100% of its parent assuming the parent has a height defined. However once you have set height:100% then the element can never grow pass that limit (just as if you had said height 700px). It's catch 22 in some respects but not an unexpected behaviour when you look at the details.

RezaRob

10:50 am on Dec 12, 2011 (gmt 0)

10+ Year Member

The body may then take a percentage value of it's parent.
[...]
Hence the "Cascading" in C.S.S. ;)

Not a "birdbrain" _at_ all! ;)

To use a a percentage height the parent must also have a height defined. If the parent has no height defined then the percentage height of the child will collapse to height :auto (the default).

Excellent, awesome. Thanks everyone. Paul, thanks for all your tips. :)