时间戳

首页 > 解决方案 > 侧边栏超出页脚

html - 侧边栏超出页脚

问题描述

我正在处理我网站的主页，但是当我希望它停止在页脚顶部时，sidenav 正在延伸到我的页脚中。我已经尝试过几次更改我的 CSS 导航部分中的 height 属性，但是height: 100%;导致侧边栏延伸到页脚并且设置height: auto;也不起作用。我可以使用 px 设置 height 属性，但我不想根据我的主页上有多少内容来继续调整它。

header {
  color: #348899;
  background-color: #343642;
  background-image: url(heading.png);
  background-position: right;
  background-repeat: no-repeat;
}
#wrapper {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}
h1 {
  margin: 0;
  padding: 10px;
  font-size: 42pt;
  line-height: 36pt;
  font-weight: lighter;
}
h2 {
  margin: 0;
  padding: 0 10px 5px;
  font-size: 18pt;
  line-height: 22pt;
  font-weight: bold;
  font-style: italic;
}
h3 {
  margin: 0;
  padding: 0 10px 5px 0;
  font-size: 18pt;
  line-height: 22pt;
  font-weight: bold;
  font-style: italic;
}
h4 {
  margin: 0;
  padding: 0 10px 5px 0;
  font-size: 18pt;
  line-height: 22pt;
  font-weight: bold;
  font-style: italic;
}
nav {
  color: #343642;
  background-color: #979C9C;
  float: left;
  width: 160px;
  font-weight: bold;
  position: absolute;
  height: 100%;
}
nav ul li {
  list-style: none;
  padding: 10px;
}
nav ul li a {
  display: block;
  text-decoration: none;
  color: #343642;
}
nav ul li ul {
  display: none;
  position: relative;
  left: auto;
  right: 35%;
}
nav ul li:hover ul  {
  display: block;
}
nav ul li ul li a:hover {
  background-color: #F2EBC7;
  width: 75px;
}
main {
  color: #17354A;
  background-color: #F2EBC7;
  margin-left: 160px;
  padding: 10px;
  z-index: 0;
  display: flex;
}
.column  {
  float: left;
}
.left {
  width: 75%;
}
.right {
  width: 25%;
}
.text {
  font-size: 25px;
  margin: 0 20px 0 0;
}
.brass {
  text-align: center;
  margin: 0 0 5px 5px;
}
.logo {
  float: right;
  margin: 0 0 5px 5px;
}
body{
  background-color: #348899;
  font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
footer {
  color: #348899;
  background-color: #343642;
  font-style: italic;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="project.css">
  <meta charset="utf-8" />
  <title>Beginning Band Players - Home</title>
</head>
<body>
  <div id="wrapper">
    <header>
      <h1>
        Beginning Band Players
      </h1>
      <h2>
        Home
      </h2>
    </header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Brass</a>
          <ul>
            <li><a href="trumpet.html">Trumpet</a></li>
            <li><a href="frenchhorn.html">Horn</a></li>
            <li><a href="trombone.html">Trombone</a></li>
            <li><a href="euphonium.html">Euphonium</a></li>
            <li><a href="tuba.html">Tuba</a></li>
          </ul>
        </li>
        <li><a href="#">Woodwind</a>
          <ul>
            <li><a href="clarinet.html">Clarinet</a></li>
            <li><a href="flute.html">Flute</a></li>
            <li><a href="oboe.html">Oboe</a></li>
            <li><a href="saxophone.html">Saxophone</a></li>
          </ul>
        </li>
        <li><a href="#">Percussion</a>
          <ul>
            <li><a href="">Bells</a></li>
            <li><a href="">Snare Drum</a></li>
          </ul>
        </li>
        <li><a href="#">Maintenence</a></li>
        <li><a href="#">Additional Equipment</a></li>
      </ul>
    </nav>
    <main>
      <div class="column left">
        <div class="logo">
         <img src="Logo-E.png" alt="logo" height="200" width="355">
        </div>
        <h3>
         About us:
        </h3>
        <div class="text">
          <p>
            The purpose of Beginning Band Players is to provide students and parents
            with the necessary resources for a successful start in any band program.
            It's our hope that prospective music students find what they're looking
            for and enjoy a lifetime of music.
          </p>
          <div class="brass">
            <img src="brass-1.jpg" alt="brass" height="238" width="425">
          </div>
        </div>
      </div>
      <div class="column right">
        <h4>
          What to Expect:
        </h4>
        <p>
          Students can learn a little about each instrument found in beginning band
          programs and decide which one they like best. They'll be able to see and
          hear what each instrument sounds like.
        </p>
        <h3>
          Additional Resources
        </h3>
        <p>
          Students may also need additional equipment such as practice books or supplies
          to help maintain their instruments. Links to such supplies can be found on the
          Additional Equipment page.
        </p>
      </div>
    </main>
    <footer>
      Copyright &copy; 2022, InsertNameHere <br>
      <b>Email:</b> <a href="mailto:me@cawolfe@augusta.edu" target="_blank">EmailAddress</a><br>
    </footer>
  </div>
</body>
</html>

标签： htmlcss

解决方案

推荐阅读