Created
July 31, 2013 06:15
-
-
Save ilovejs/6119743 to your computer and use it in GitHub Desktop.
From lyndia.com css layout tutorial module 3 - video 8 Please notice the comments down there !! They show the limitation of setting height for columns
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>column height</title> | |
<!--[if lt IE 9]> | |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<style> | |
/* | |
Please notice the comments down there !! | |
They show the limitation of setting height for columns | |
*/ | |
aside, article, section, header, footer, nav { | |
display: block; | |
} | |
html, body, section, p { | |
margin: 0; | |
padding: 0; | |
} | |
html { | |
background: rgb(221,203,181); | |
height: 100%; | |
} | |
body { | |
width: 960px; | |
background: #fff; | |
margin: 0 auto 2em; | |
font: 100% Georgia, "Times New Roman", Times, serif; | |
height: 100%; /*even child won't take all the spaces of the viewport, it still strenth all the way downwards*/ | |
} | |
section { | |
background: yellow; | |
width: 50%; | |
min-height: 100%; /*let it strench by it's children*/ | |
padding: 10px; /*it will apply on top of height:100% */ | |
} | |
</style> | |
</head> | |
<body> | |
<section> | |
<p>I am content inside of a section. I want this section (which has a green background) to stretch to the full height of the layout. I could set height to 100%, but that by itself doesn't have the desired result. To make the element truly stretch to the full height, I have to also explicitly set the height of all its parent elements as well.</p> | |
<p>I am content inside of a section. I want this section (which has a green background) to stretch to the full height of the layout. I could set height to 100%, but that by itself doesn't have the desired result. To make the element truly stretch to the full height, I have to also explicitly set the height of all its parent elements as well.</p> | |
<p>I am content inside of a section. I want this section (which has a green background) to stretch to the full height of the layout. I could set height to 100%, but that by itself doesn't have the desired result. To make the element truly stretch to the full height, I have to also explicitly set the height of all its parent elements as well.</p> | |
<p>I am content inside of a section. I want this section (which has a green background) to stretch to the full height of the layout. I could set height to 100%, but that by itself doesn't have the desired result. To make the element truly stretch to the full height, I have to also explicitly set the height of all its parent elements as well.</p> | |
<p>I am content inside of a section. I want this section (which has a green background) to stretch to the full height of the layout. I could set height to 100%, but that by itself doesn't have the desired result. To make the element truly stretch to the full height, I have to also explicitly set the height of all its parent elements as well.</p> | |
</section> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment