Elements not populate the entire screen 1

lupidol · Sep 20, 2016

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

ChrisHirst · Sep 20, 2016

lupidol said:
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.

lupidol said:
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?

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.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Elements not populate the entire screen 1

lupidol

Programmer

ChrisHirst

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor