Percentage values are based on the height of the parent (in this case section). Since you don't have anything set for the height of section, CSS doesn't know what you mean when you say 100%.
100% of what?
You can fix this by specifying a height for the section. This can be a finite value (like 400px) or a percentage, but this problem is recursive, so if you use a percentage value for the height of the section, its parent then needs a defined height. This can carry up the DOM chain all the way to the <html> element which uses the window height as its relative height for percentage values.
section
{
height: 400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
section
{
height: 400px;
}
/* Style the header */
header {
background-color: #666;
padding: 1px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 100%; /*works if absolute pixel values given*/
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 100%; /*works if absolute pixel values given*/
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
