CSS中的100％高度导航栏？

时间：2016-01-27 22:57:29

标签： html css

我在Stack Overflow上看了几十个类似的问题并尝试了很多答案，但我仍然无法让它工作。

如何让我的页面的nav元素占据网站的整个高度？因此，目前，因为页面主要部分中有更多内容，所以在导航底部和页脚之间留下了空隙（例如运行代码）。我希望这个空白用空导航填充并保留相同的背​​景颜色。

这是我的HTML和CSS：

body {
  width: 960px;
  margin: auto;
  font-family: Calibri;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-color: #FFF8ED;
}

header {
  text-align: center;
  width: 960px;
  border: 1px solid black;
  margin-top: 10px;
}

/* Navigation Bar Style */
nav {
  float: left;
  width: 160px;
  display: table-cell;
}

nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-color: #333333;
}

nav li a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: white;
}

.active {
  background-color: #FF791C;
  color: white;
}

nav li a:hover:not(.active) {
  background-color: #CC6016;
  color: white;
}

.menu {
  list-style-type: none;
  display: block;
  margin: 0px;
  padding: 0px;
}

.dropdown ul {
  overflow: hidden;
  height: 0px;
  font-size: small;
  margin-left: 25px;

  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

.dropdown:hover ul {
  height: 140px;
}
/**/

section {
  float: left;
  width: 780px;
  padding: 0px 10px;
}

footer {
  background-color: #333333;
  color: #FFFFFF;
  text-align: center;
  width: 960px;
  padding: 10px;
  clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test HTML Page</title>
  <link rel="stylesheet" href="style.css">
<body>
  <header>
    <h1>Heading</h1>
  </header>
  <nav>
    <ul class="menu">
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <div class="dropdown">
        <li><a href="#">&#9660; Page 2</a></li>
          <ul>
            <li><a href="pages/step1.html">Option 1</a></li>
            <li><a href="pages/step2.html">Option 2</a></li>
            <li><a href="pages/step3.html">Option 3</a></li>
            <li><a href="pages/step4.html">Option 4</a></li>
          </ul>
      </div>
      <li><a href="#">Page 3</a></li>
    </ul>
  </nav>
  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
  </section>
  <footer>
    Copyright &copy; 1999 - 2016
  </footer>
</body>
</html>

列不需要是相同的高度，只是我不希望导航比主要短（因此它一直到达页脚）。

感谢您的帮助！

2 个答案:

答案 0 :(得分：2)

从float: left和nav移除section。

然后添加以下样式：

section {
  display: table-cell;
}

nav {
  background: #333333;
  vertical-align: top;
}


body {
  width: 960px;
  margin: auto;
  font-family: Calibri;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-color: #FFF8ED;
}
header {
  text-align: center;
  width: 960px;
  border: 1px solid black;
  margin-top: 10px;
}
/* Navigation Bar Style */

nav {
  width: 160px;
  display: table-cell;
}
nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-color: #333333;
}
nav li a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: white;
}
.active {
  background-color: #FF791C;
  color: white;
}
nav li a:hover:not(.active) {
  background-color: #CC6016;
  color: white;
}
.menu {
  list-style-type: none;
  display: block;
  margin: 0px;
  padding: 0px;
}
.dropdown ul {
  overflow: hidden;
  height: 0px;
  font-size: small;
  margin-left: 25px;
  -webkit-transition: height 1s ease;
  -moz-transition: height 1s ease;
  -o-transition: height 1s ease;
  -ms-transition: height 1s ease;
  transition: height 1s ease;
}
.dropdown:hover ul {
  height: 140px;
}
/**/

section {
  width: 780px;
  padding: 0px 10px;
}
footer {
  background-color: #333333;
  color: #FFFFFF;
  text-align: center;
  width: 960px;
  padding: 10px;
  clear: both;
}

section {
  display: table-cell;
}

nav {
  background: #333333;
  vertical-align: top;  
}
<header>
  <h1>Heading</h1>
</header>
<nav>
  <ul class="menu">
    <li><a href="#" class="active">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <div class="dropdown">
      <li><a href="#">&#9660; Page 2</a>
      </li>
      <ul>
        <li><a href="pages/step1.html">Option 1</a>
        </li>
        <li><a href="pages/step2.html">Option 2</a>
        </li>
        <li><a href="pages/step3.html">Option 3</a>
        </li>
        <li><a href="pages/step4.html">Option 4</a>
        </li>
      </ul>
    </div>
    <li><a href="#">Page 3</a>
    </li>
  </ul>
</nav>
<section>
  <h2>Heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
  <h3>Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
  <h3>Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
</section>
<footer>
  Copyright &copy; 1999 - 2016
</footer>

答案 1 :(得分：1)

一种解决方案是在<nav>中包含<section>和<main>，并为<main>提供background-color：

main {
background-color: rgb(51,51,51);
}

NB 此时，<main>仅包含2个浮动元素，因此它似乎在页面流中不占用垂直空间，背景颜色不会可见。

接下来，自动清除<main>，以便 占据页面流中的垂直空间，background-color变为可见：

main::after {
content:'';
display:block;
clear:both;
}

最后，重新着色<section>，使其与页面具有相同的background-color：

section {
background-color:rgb(255,248,237);
}

完成示例： 

body {
  width: 960px;
  margin: auto;
  font-family: Calibri;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-color: #FFF8ED;
}

header {
  text-align: center;
  width: 960px;
  border: 1px solid black;
  margin-top: 10px;
}

/* Navigation Bar Style */
nav {
  float: left;
  width: 160px;
  display: table-cell;
}

nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-color: #333333;
}

nav li a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: white;
}

.active {
  background-color: #FF791C;
  color: white;
}

nav li a:hover:not(.active) {
  background-color: #CC6016;
  color: white;
}

.menu {
  list-style-type: none;
  display: block;
  margin: 0px;
  padding: 0px;
}

.dropdown ul {
  overflow: hidden;
  height: 0px;
  font-size: small;
  margin-left: 25px;

  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

.dropdown:hover ul {
  height: 140px;
}
/**/

section {
  float: left;
  width: 780px;
  padding: 0px 10px;
}

footer {
  background-color: #333333;
  color: #FFFFFF;
  text-align: center;
  width: 960px;
  padding: 10px;
  clear: both;
}


main {
  background-color: rgb(51,51,51);
}

main::after {
content:'';
display:block;
clear:both;
}

section {
background-color:rgb(255,248,237);
}
 <header>
    <h1>Heading</h1>
  </header>

<main>

  <nav>
    <ul class="menu">
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <div class="dropdown">
        <li><a href="#">&#9660; Page 2</a></li>
          <ul>
            <li><a href="pages/step1.html">Option 1</a></li>
            <li><a href="pages/step2.html">Option 2</a></li>
            <li><a href="pages/step3.html">Option 3</a></li>
            <li><a href="pages/step4.html">Option 4</a></li>
          </ul>
      </div>
      <li><a href="#">Page 3</a></li>
    </ul>
  </nav>
  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
  </section>
</main>

  <footer>
    Copyright &copy; 1999 - 2016
  </footer>

相关问题
最新问题