Help - Search - Members - Calendar
Full Version: How to set <div> height as a %?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Skywalker
Hi, I am trying to set the height of a <div> with CSS using % as the unit. I've got the height working when defined as 30px but when I change it to 30%(or any value %) the <div>'s border doesn't respond (and the bottom side of the border ends up hugging the bottom side of the text in the <div>!?).
The CSS and XHTML is as follows:

As appears in the external CSS file:

.staticBox {
border:2px solid gray;
height:30%; /* This doesn't change the height as I thought. If I change this to use px units the height works fine so why not %? */
width:25%;
}

As appears in the XHTML file:

<div class="staticBox">
This is the static box.
</div>


The CSS width property for the <div> works well using %. I can't understand why the height for the <div> specified as a % doesn't work similarly!
I am using Internet Explorer 7 and am using the Transitional DOCTYPE.
If you have any ideas why this doesn't work and how I could get it to work it would be great to hear from you! Thanks. smile.gif


pandy
What is the height supposed to be a percent of?
Christian J
http://www.w3.org/TR/CSS21/visudet.html#propdef-height says

"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 (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block."


So one of the container elements needs an explicit height (in this case <body>):

CODE
body {
height: 10em;
border: solid green;
}

div {
height: 50%;
background: red;
}

div p {
height: 50%;
background: pink;
}


unless every container element up to the <html> root element has an explicit percentage height:

CODE
html {height: 100%;}

body {
height: 50%;
border: solid green;
}

div {
height: 50%;
background: red;
}

div p {
height: 50%;
background: pink;
}


or a container element has a percentage height and is absolutely positioned:

CODE
div {
position: absolute;
height: 50%;
background: red;
}

div p {
height: 50%;
background: pink;
}




Skywalker
Hi pandy. I am getting the idea that my height needed to be a percent 'Of Something' i.e. a parent/containing block. I have just tried out setting the html and body elements in my CSS file to a height 100% and everything works sweet! So I am real happy! Thanks for your help!
Skywalker
Christian J. Thanks for your code examples. They will give me something to think about.
I have only just set up my html and body elements as follows:

html, body {height: 100%;}

This works GREAT! Now I am able to adjust the height of my <div> using percentages which was what I was after!!!
I realised that the <body> element was the parent of my <div> on the page but hadn't considered also setting the <html> height to 100%.
Like you said -> the <html> element/tag is the 'The Root' Element. Well this is all good. Thanks again. Seeyou around.
Christian J
One thing to watch out for is if a container must expand to fit its content. Then "height: auto" is needed on e.g. BODY, but you can't base a DIV percentage height on that with CSS. Also, if a percentage height container is too small for its content (if e.g. the user changes text or browser window size) the content may spill out somewhere. Possibly you could add "overflow: auto" on the DIV, just in case.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.