html - 如何更正页脚元素的位置？

Question

我想通过使用纯 HTML 和 CSS 重新创建 Bootstrap 主页来提高我的 HTML 和 CSS 技能。我快完成了，但我的页脚似乎有问题。其他所有内容都按照我想要的方式定位，但页脚上的所有内容都会上升到页面的顶部和中间。谁能告诉我我在这里缺少什么？

HTML

  <header>
    <div class="top-bar">
      <p><a href="#">Aww yeah, Bootstrap 4 is coming!</a></p>
    </div>

    <nav>
      <div class="nav-bar">
        <div class="logo">
          <a href="#">Bootstrap</a>
        </div>

        <div class="left-nav">
          <ul>
            <li><a href="">Getting Started</a></li>
            <li><a href="">CSS</a></li>
            <li><a href="">Components</a></li>
            <li><a href="">JavaScript</a></li>
            <li><a href="">Customize</a></li>
          </ul>
        </div>

        <div class="right-nav">
          <ul>
            <li><a href="">Themes</a></li>
            <li><a href="">Expo</a></li>
            <li><a href="">Blog</a></li>
          </ul>
        </div>
      </div>
      <nav>
  </header>
</div>


<center>
  <main>
    <section>
      <div class="head-component">
        <div class="b-logo">
          <p>B</p>
        </div>

        <div class="short-description">
          <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
        </div>

        <div class="download-button">
          <button class="dwn">Download Bootstrap</button>
        </div>

        <div class="current">
          <p>Currently v3.3.5</p>
        </div>
      </div>
    </section>

    <section>
      <div class="mid-section">

        <div class="mid-info">
          <h2>Designed for everyone, everywhere.</h2>
          <p>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
        </div>

        <hr class="hz-line" />

        <div class="column-left">
          <img src="http://getbootstrap.com/assets/img/sass-less.png" />
          <h4>Preprocessors</h4>
          <p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
        </div>

        <div class="column-middle">
          <img src="http://getbootstrap.com/assets/img/devices.png" />
          <h4>One framework, every device.</h4>
          <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
        </div>

        <div class="column-right">
          <img src="http://getbootstrap.com/assets/img/components.png" />
          <h4>Full of features</h4>
          <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
        </div>

        <div class="clear"></div>

        <hr class="hz-line" />

        <div class="github">
          <p>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
        </div>

        <div class="github-button">
          <button class="view-git">View the Github Project</button>
        </div>

        <div class="clear"></div>

        <div class="spacer"></div>

        <div class="clear"></div>

        <div class="photo-section">

          <hr class="hrln-full" />

          <div class="second-mid-info">
            <h2>Built with Bootstrap.</h2>
            <p>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.</p>
          </div>

          <hr class="hz-line" />

          <div class="photos">
            <img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" />
            <img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" />
            <img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" />
            <img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" />
          </div>

          <hr class="hz-line" />

          <div class="expo-button">
            <p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
            <button class="expo">Explore the Expo</button>
          </div>

          <hr class="hrln-full" />

        </div>
      </div>
      <div class="clearfooter"></div>
    </section>
  </main>

  <div class="clear"></div>

  <footer>

    <p>Designed and built with all the love in the world by @mdo and @fat.
      <br /> Maintained by the core team with the help of our contributors.
      <br /> Code licensed under MIT, documentation under CC BY 3.0.</p>
    <ul>
      <li><a href="#">Github</a></li>
      <li><a href="#">Examples</a></li>
      <li><a href="#">v2.3.2 docs</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Expo</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Releases</a></li>
    </ul>
  </footer>
</center>

CSS

    *, *:before, *:after {
  box-sizing: border-box;
}
html, body, #wrap {
  height: 100%;
}
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fff;
}
h1 {
  font-size: 50px;
}
h2 {
  font-size: 40px;
}
h3 {
  font-size: 30px;
}
h4 {
  font-size: 22px;
  font-weight: 100px;
}
h5 {
  font-size: 15px;
}
h6 {
  font-size: 14px;
}
#container {}
ul {
  list-style: none;
}
li {
  list-style: none;
  display: inline;
  padding: 10px;
}
a {
  list-style: none;
  color: inherit;
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0;
}
main {
  padding-bottom: 150px;
  display: block;
  margin: 0 auto;
}
.top-bar {
  margin: 0;
  padding: 15px 0;
  background-color: #0275D8;
  text-align: center;
}
.top-bar p {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin: 0;
}
.top-bar:hover {
  margin: 0;
  padding: 15px 0;
  background-color: #0269C2;
  text-align: center;
}
.nav-bar {
  background-color: #fff;
  position: relative;
  color: #583F7E;
  display: block;
  width: 100%;
  height: 50px;
}
.logo {
  position: absolute;
  font-size: 20px;
  font-weight: 700;
  color: #583F7E;
  padding: 15px;
  line-height: 0.8em;
  margin-left: 100px;
}
.left-nav {
  float: left;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  margin-left: 200px;
}
.right-nav {
  float: right;
  text-align: right;
  font-size: 15px;
  font-weight: 500;
  margin-right: 120px;
}
.left-nav a:hover {
  background-color: #f9f9f9;
}
.right-nav a:hover {
  background-color: #f9f9f9;
}
.head-component {
  background-color: #583F7E;
  height: 700px;
  display: block;
  margin: 0 auto;
}
.b-logo {
  margin: 0 auto;
  padding-top: 5px;
  width: 160px;
  height: 300px;
  display: block;
}
.b-logo p {
  font-size: 130px;
  font-weight: 700;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 25px;
  text-align: center;
}
.short-description {}
.short-description p {
  font-size: 30px;
  color: #fff;
  font-weight: 300;
  width: 850px;
  text-align: center;
  display: block;
  margin: 0 auto;
  padding-top: 40px;
}
.download-button {
  padding-top: 40px;
}
.dwn {
  background: none;
  font-size: 20px;
  padding: 15px;
  color: #fff;
  font-weight: 400;
  border: 1px solid #fff;
  border-radius: 5px;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.dwn:hover {
  background: #fff;
  font-size: 20px;
  padding: 15px;
  color: #583F7E;
  font-weight: 400;
  border: 1px solid #fff;
  border-radius: 5px;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.current p {
  color: #9781A9;
  font-size: 14px;
  padding-bottom: 75px;
  padding-top: 20px;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.mid-section {
  height: 100%;
  background-color: #fff;
  display: block;
  margin: 0 auto;
}
.mid-info {
  padding-top: 75px;
  font-weight: 300;
  color: #333;
  width: 900px;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.mid-info p {
  font-weight: 400;
  font-size: 22px;
  color: #555;
  padding-bottom: 20px;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.hz-line {
  width: 10%;
  color: #f3f3f3;
  opacity: 0.5;
}
.column-left {
  width: 32%;
  float: left;
  padding-top: 25px;
  padding-left: 75px;
  font-weight: 100;
  color: #333;
}
.column-left img {
  width: 100%;
}
.column-left p {
  font-weight: 400;
  font-size: 16px;
  color: #555;
  padding-bottom: 20px;
}
.column-middle {
  width: 32%;
  float: left;
  padding-top: 25px;
  padding-left: 75px;
  font-weight: 100;
  color: #333;
}
.column-middle img {
  width: 100%;
}
.column-middle p {
  font-weight: 400;
  font-size: 16px;
  color: #555;
  padding-bottom: 20px;
}
.column-right {
  width: 32%;
  float: left;
  padding-top: 25px;
  padding-left: 75px;
  font-weight: 100;
  color: #333;
}
.column-right img {
  width: 100%;
}
.column-right p {
  font-weight: 400;
  font-size: 16px;
  color: #555;
  padding-bottom: 20px;
}
.clear {
  clear: both;
}
.github {
  padding-top: 15px;
  font-weight: 300;
  color: #333;
  width: 1024px;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.github p {
  font-weight: 400;
  font-size: 18px;
  color: #555;
  padding-bottom: 20px;
  text-align: center;
}
.view-git {
  background: none;
  font-size: 20px;
  padding: 10px;
  color: #583F7E;
  font-weight: 400;
  border: 1px solid #583F7E;
  border-radius: 5px;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.view-git:hover {
  background: #583F7E;
  font-size: 20px;
  padding: 10px;
  color: #fff;
  font-weight: 400;
  border: 1px solid #fff;
  border-radius: 5px;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.hrln-full {
  color: #f3f3f3;
  opacity: 0.5;
}
.spacer {
  height: 60px;
}
.second-mid-info {
  padding-top: 75px;
  font-weight: 300;
  color: #333;
  width: 900px;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.second-mid-info p {
  font-weight: 400;
  font-size: 22px;
  color: #555;
  text-align: center;
  display: block;
  margin: 0 auto;
  padding-bottom: 30px;
}
.photo-section {
  height: 100%;
  display: block;
  margin: 0 auto;

}
.photos {
  padding: 30px;
  padding-left: 115px;


}
.photos img {
  width: 23%;

}
.expo-button {
  padding-top: 15px;
  padding-bottom: 120px;
  font-weight: 300;
  color: #333;
  width: 1024px;
  display: block;
  margin: 0 auto;
}
.expo-button p {
  font-weight: 300;
  font-size: 22px;
  color: #555;
  padding-bottom: 30px;
  text-align: center;
  display: block;
  margin: 0 auto;

}
.expo {
  background: none;
  font-size: 20px;
  padding: 10px;
  color: #583F7E;
  font-weight: 400;
  border: 1px solid #583F7E;
  border-radius: 5px;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.expo:hover {
  background: #583F7E;
  font-size: 20px;
  padding: 10px;
  color: #fff;
  font-weight: 400;
  border: 1px solid #fff;
  border-radius: 5px;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.clearfooter {
  height: 130px;
  clear: both;
}
footer {
  text-align: center;
  bottom: 0;
  height: 100%;
  left: 0;
  width: 100%;
  display: block;
  margin: 0 auto;
}
footer p {
  text-align: center;
}
footer ul {
  position: relative;
}
footer li {
  color: #489FD6;
}
footer li:hover {
  color: #23517C;
  text-decoration: underline;
}
footer a {}

Answer 1

据我所知，我相信这是因为两个主要原因。

1. 您已经为内容高度高于固定高度的元素设置了固定高度。

   .mid-section {
     height: 500px;
     background-color: #fff;
     margin: 0;
   }
   
   .photo-section {
     height:500px;
   }
   

2. 页脚具有 position: absolute 但不包含在具有 position: relative 的父项中。如果您希望页脚固定在底部，请使用 position: fixed。

   footer {
     text-align: center;
     bottom: 0;
     height: 100px;
     left: 0;
     position: absolute;
     width: 100%;
   }