有人能告诉我我做错了什么吗？我已经做了相当多的研究，据我所知，100% 的高度应该延伸到父容器的高度。但出于某种原因，我的导航超出了它。 A Screenshot HTML和 Screenshot CSS
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Sumnah-Home</title>
<link href="styles/main.css" rel="stylesheet">
<meta charset="utf-8">
</head>
<body class="index">
<article>
<table class="banner" >
<tr>
<td rowspan="2" class="banner"><span class="bannerText">Sunny Mtn. School of Nartural Healing</span></td>
<td><img class="banner" src="images/3_MemorialDay_t13681a.jpg"></td>
<td><img class="banner" src="images/MemorialDay.jpg"></td>
</tr>
</table>
</article>
<article class="nav">
<ul class="menu">
<li><a href="index.html">Sumnah-Home</a> </li>
<li><a href="information.html">Information Bulletin</a></li>
<li><a href="information.html" >SPANISH</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="Registration">Registration</a></li>
<li><a href="news.html">Sunny Mtn News</a></li>
</ul>
</article>
<img class="logo" src="images/sunnmn-logo.jpg" alt="Sunny Mountain School of Natural Healing">
<article class ="content">
<p class ="content_left">Sunny Mountain School of Natural healing has designed its programs of external, independent studies for busy, working or professional people who desire a high level of excellence in Natural Healing. Naturopathy is a system of health restoration and maintenance which emphasizes natural health modalities instead of drugs. It embraces: herbs, vitamins, minerals, sound nutrition, sun therapy, hydrotherapy, massage, etc.
This program is ideal for persons who have acquired sufficient levels of mental discipline to study independently in their homes and at their own pace, under the guidance of our school.</p>
<p class="highlightLeft"><b>See Information Bulletin for more details...</b></p>
<p class="content_right"><img class="flag" src="images/flag2.png" alt="American Flag">Operating for nearly two decades, Sunny Mountain School of Natural healing has designed its programs of external, independent studies for busy, working or professional people who desire a high level of excellence in Natural Healing. Naturopathy is a system of health restoration and maintenance which emphasizes natural health modalities instead of drugs. It embraces: herbs, vitamins, minerals, sound nutrition, sun therapy, hydrotherapy, massage, etc. This program is ideal for persons who have acquired sufficient levels of mental discipline to study independently in their homes and at their own pace, under the guidance of our school.</p>
<p class="highlightRight"><b>See About us for more details...</b></p>
</article>
<article></article>
<footer>All rights reserved.</footer>
</body>
</html>
这是CSS
/*----- Page Style------*/
html {
background-color: #6699CC;
}
body.index {
background-color: white;
margin: 0px auto;
width: 860px;
height: 842px;
}
/*----- Banner Style------*/
table.banner{
width: 100%;
margin: 0px -1px;
}
td.banner{
color: white;
background-color: #003366;
}
span.bannerText{
display: block;
width:300px;
font-size: 30px;
padding-left: 10px;
}
img.banner{
height: 100%;
width: 100%;
}
/*----- Navigation Style------*/
article.nav{
float: left;
height: 100%;
overflow: auto;
}
ul{
width: 120px;
background-color: #CCCC99;
height: 100%;
}
ul.menu li{
list-style-type: none;
width: 160px;
height: 25px;
background:#003366;
position: relative;
right: 40px;
margin: 0px 0px 2px;
}
/*----- Links Style------*/
ul.menu li a{
color:white;
font-size: 15px;
margin-left: 15px;
padding: 0px 0px 0px;
}
/*-----Image Style-----*/
img.logo{
float: right;
margin-right: 80px;
margin-top: 15px;
}
img.flag{
float: left;
width: 150px;
height: 150px;
}
/*-----Heading Style----*/
article.heading{
text-align: center;
}
/*-----Content Style----*/
article.content{
margin: 280px 0px 0px 180px;
width: 600px;
height: 385px;
position: relative;
}
p.highlightLeft{
text-transform: uppercase;
position: absolute;
bottom: 0px;
width: 250px;
font-weight: 1000px;
}
p.highlightRight{
text-transform: uppercase;
position: absolute;
bottom: 0px;
width: 250px;
font-weight: 1000px;
right: 0px;
}
p.content_left {
width: 280px;
position: absolute;
left: 0px;
}
p.content_right {
width: 350px;
position: absolute;
right: -50px;
}
/*----Footer Style-----*/
Footer{
width: 860px;
height: 25px;
text-align: center;
background-color: #333333;
color: white;
padding-top: 5px;
margin-top: 50px;
}
最佳答案
具有 100% 高度的元素超出了页面，因为它是
与 <body> 高度相同，这是包含元素。 但是，您还没有考虑到页眉的高度。
使用 100% 高度时要小心:只有当它的父元素具有固定高度时，它才会按预期工作。
另一件需要注意的事情是，除非您使用 box-sizing: border-box，否则浏览器会将填充添加到 100% 高度。在这种情况下，填充将包含在 100% 中。
关于css - Float Nav 正在扩展容器以及 Nav 和 Banner 之间的空白区域，但为什么呢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37594173/