Question

有人能告诉我我做错了什么吗？我已经做了相当多的研究，据我所知，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;
}

Answer 1

具有100％高度的元素正在超出页面范围，因为它是与<body>相同的高度，它是包含元素。 但是，您尚未考虑标题的高度。

使用100％高度时要小心：如果它的父元素具有固定高度，它将仅按预期工作。

需要注意的另一件事是浏览器会将填充添加到100％的高度，除非你使用box-sizing: border-box，在这种情况下，填充将包含在中100％。< / p>

Float Nav正在扩展到容器以及导航和横幅之间的白色空间，但为什么呢？

1 个答案: