The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> How to set <div> height as a %?
Skywalker
post Dec 2 2008, 02:50 AM
Post #1





Group: Members
Posts: 3
Joined: 30-November 08
Member No.: 7,229
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


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 2 2008, 03:15 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
What is the height supposed to be a percent of?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 2 2008, 09:49 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Skywalker
post Dec 3 2008, 03:03 AM
Post #4





Group: Members
Posts: 3
Joined: 30-November 08
Member No.: 7,229
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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Skywalker
post Dec 3 2008, 03:17 AM
Post #5





Group: Members
Posts: 3
Joined: 30-November 08
Member No.: 7,229
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 3 2008, 08:47 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 05:27 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC