Sign in to follow this  
Jonny_S

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

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">

<HEAD>
	<TITLE>ScaredyCatRecords Template Page</TITLE>
	<LINK href="layout.css" type="text/css" rel="stylesheet">
</HEAD>
<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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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.

cheers for your help,

Jon

Share this post


Link to post
Share on other sites
Quote:
Original post by Jonny_S
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.
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this