homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




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

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




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

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




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

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




msg:4396952
 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




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

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




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


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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved