INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Elements not populate the entire screen

Elements not populate the entire screen

(OP)
Hi everyone,
I'd like my 4 elements to populate the entire height of the screen. No less and no more.
Here is my code:

CODE

<!doctype>
<html>
<head>
<style>
<style type="text/css">
	{
		top: 0;
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	html, body
	{
		height:100%;
	}
	.first {position: absolute;border:1px solid magenta; width:70%; max-width:70%; height: 20%; max-height:20%; margin-left:15%;top:0%;}
	.second {position: absolute;border:1px solid red; width:70%; max-width:70%; height: 60%; max-height:60%; margin-left:15%;top:20%;}
	.overlap_second{position:absolute;border:1px solid green; width:70%; max-width:70%; height: 60%; max-height:60%; margin-left:15%;top:20%;}
	.fourth {position: absolute;border:1px solid cyan; width:70%; max-width:70%; height: 20%; max-height:20%; margin-left:15%;top:80%;}
	
</style>
</head>
<body>
<p class = "first">first</p>
<p class = "second">second</p>
<p class = "overlap_second">overlap_second</p>
<p class = "fourth">fourth</p>
</body>
</html> 
The result I get is this:

First element is half centimeter beneath the top row of the screen and in order to see the bottom line of fourth element
I need to scroll the screen.
Could anyone tell me why my 4 elements do not occupy exactle 100% of the screen's height?
Thanks

RE: Elements not populate the entire screen

Quote (lupidol)

Could anyone tell me why my 4 elements do not occupy exactle 100% of the screen's height?

You haven't 'told' them to.

Position: absolute REMOVES elements from the document flow so the have no effect on ANY other element in the document including the html and body elements.

If you want the p elements to affect the body and html elements use position relative.


Quote (lupidol)

First element is half centimeter beneath the top row of the screen
1ex body margins at the default font size because you have not set them to 0.

Setting the html element to 100% always extends it further than the bottom edge of the browser window by about 20px, this is to allow for a horizontal bottom scroll bar inside the browser view-port should one be necessary.


what exactly is this supposed to apply to?

CODE --> CSS

{
		top: 0;
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	} 
If it is intended for ALL elements, it needs a wildcard selector '*' before the opening bracket.

'vertical-align' only applies to sibling inline elements in the same parent, you have no inline elements at all.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind these jesus character, stars had to die for me to live.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close