# [web] Sometimes I feel so stupid, this is why...

This topic is 4239 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Whenever I seem to be progressing with web development I get something like this and then I feel like I've been kicked where it hurts. So anyway heres my problem, I have a CSS file called layout.css, in this I have set the body to have a width and height of 100%. I then have a title_bar id selector which sets its width to be 100% and its height to be 25%, simple enough. However when I view the page the width of the title_bar division is correctly at 100% however the height property set in the CSS file does not seemed to have had any affect! Below is the code to further illustrate my problem. CSS File
body {width:100%; height:100%; margin:0; overflow:auto;}

#title_bar {width:100%; height:25%; border:1px solid black;}

HTML File
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<TITLE>ScaredyCatRecords Template Page</TITLE>
<BODY>
<DIV id="title_bar">
This is the title
</DIV>
</BODY>

I've had this problem before but it seemed to have been fixed by setting the width and height properties in the body CSS to 100%, however I'm stumped this time round! Thanks for your help Jon [EDIT] I forgot to mention, the height property does seem to work when I use another unit of measurement (i.e. px or em) which is what I find even more frustrating as it says on W3Schools that percentages should be fine, as I assumed.

##### Share on other sites
The height parameter, unless specified with a value of anything other than %, will not work as you intend it to. This has been my experience, I've been too lazy to figure out why. So basically, if you want it to be 200px, say so, less, it'll fit the contents of the text within itself.

##### Share on other sites
The height % will be a percentage of it's parent element. So, title_bar will be 25% of body. Body will be 100% of it's parent html. You have set no height for the html element so it collapses to monimal height. So, change:

body {width:100%; height:100%; margin:0; overflow:auto;}

to

html, body {width:100%; height:100%; margin:0; overflow:auto;}

##### Share on other sites
Ah, now I understand. I understood that the percentage was a percentage of its parent element but for some reason always considered the body to be the top level and that it had no parent but you live and learn.

Jon

##### Share on other sites
Quote:
 Original post by Jonny_SAh, now I understand. I understood that the percentage was a percentage of its parent element but for some reason always considered the body to be the top level and that it had no parent but you live and learn.
Note that this is at least partially true in quirks mode (at least for IE) and an element given a height: 100%; will automatically stretch to the height of the window.

1. 1
2. 2
Rutin
22
3. 3
4. 4
JoeJ
16
5. 5

• 14
• 29
• 9
• 11
• 11
• ### Forum Statistics

• Total Topics
631775
• Total Posts
3002278
×