Question

我正在使用HTML和CSS创建网页，但是，当我创建页脚CSS时，它会显示在页面中间。我经历了w3Schools，但找不到任何东西。

页脚应在页面底部。但是，它在中间。我希望它可以像页脚一样保留在页面底部。有人知道如何解决此问题吗？

我在下面附加了我的代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="The Dusty Garage">
  <title> The Dusty Garage </title>
  
  <style>
    html,
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif, Verdana, Geneva, Tahoma, sans-serif;
    }
    
    #wrapper {
      margin: auto;
      width: 100%;
      max-width: 100%;
    }
    
    #navigationbar {
      clear: both;
      height: 50px;
      max-width: 100%;
      background-color: cornflowerblue;
    }
    
    #companyname {
      margin: 0;
      float: left;
      padding: 5px;
      font-size: 12px;
      text-decoration: none;
    }
    
    #companyname a {
      color: black;
      text-decoration: none;
    }
    
    nav {
      float: right;
    }
    
    nav ul {
      list-style: none;
      margin: 0;
      padding-left: 0;
    }
    
    nav ul li {
      color: #fff;
      display: block;
      float: left;
      padding: 1rem;
      border-right: 1px solid #bbb;
      position: relative;
      text-decoration: none;
      transition-duration: 0.5s;
    }
    
    nav ul li a {
      display: block;
      text-decoration: none;
      color: white;
    }
    
    nav ul li:hover,
    nav ul li:focus-within {
      background-color: royalblue;
      cursor: pointer;
    }
    
    nav ul li:focus-within a {
      outline: none;
    }
    
    nav ul li ul {
      background-color: cornflowerblue;
      visibility: hidden;
      opacity: 0;
      position: absolute;
      transition: all 0.5s ease;
      margin-top: 1rem;
      left: 0;
      white-space: nowrap;
    }
    
    nav ul li:hover>ul,
    nav ul li:focus-within>ul,
    nav ul li ul:hover,
    nav ul li ul:focus {
      visibility: visible;
      opacity: 1;
      display: block;
    }
    
    nav ul li ul li {
      background-color: cornflowerblue;
      width: 100%;
      display: inline-block;
    }
    
    nav li:last-child {
      border-right: none;
    }
    
    nav .active {
      background-color: black;
    }
    /* Navigation CSS End */
    /* Banner Image CSS Start */
    
    .hero {
      height: 70vh;
      display: block;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      background-image: url(https://memberpress.com/wp-content/uploads/2015/06/Google-tools@2x-1.png);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
    
    .hero>* {
      color: black;
    }
    
    .hero>h2 {
      font-size: 3rm;
      padding-bottom: 20rem;
      text-align: center;
      vertical-align: middle;
    }
    /* HERO IMAGE BANNER END */
    /* START SECTION CSS FOR BROWSE AND SELL */
    
    .browsesellarea {
      display: flex;
      flex-wrap: wrap;
    }
    /* Heading Style */
    
    .browsesellarea-heading {
      position: absolute;
      margin-top: 0;
    }
    
    .browsesellarea-area {
      flex: 1 0 500px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
      margin: 3rem .5rem .5rem .5rem;
      padding: .1rem .1rem .1rem .1rem
    }
    
    .browsesellarea-area img {
      display: block;
      border: black;
      width: auto;
      height: 290px;
      padding: .1rem .1rem .1rem .1rem
    }
    /* END BROWSE-SELL CSS  */
    /* START FOOTER CSS */
    
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: cornflowerblue;
      color: white;
      margin: auto;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <!---Contains Navigation and Logo-->
    <header>
      <div id="navigationbar">
        <div id=companyname>
          <a href="#">
            <h1>The Dusty Garage</h1>
          </a>
        </div>
        <nav>
          <ul>
            <li>
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#BrowseTools">Browse Tools</a>
              <ul>
                <li>
                  <a href="#BrowseTools">Browse Tools</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <section class="hero">
      <h2>Find the Perfect Tool</h2>

    </section>

    <main>
      <!---Contains Main Content-->
      <div class="goal-heading">
        <h1>Our Aim</h1>
      </div>
      <p> The Aim of this project is to develop a peer to peer marketplace for used and new tools. Many people own tools they don’t use anymore, so instead of gathering dust in the garage, this marketplace aims to give old tools a new lease on life. From
        garden to industrial tools, users can list tools they own for sale and make bids on other user’s listed tools. Users can see a list of bidders and contact the user who has made the most appealing bid, for transaction outside the website. Once
        a sale has been made, all the seller needs to do is mark the item as sold .</p>
      <section class="browsesellarea">
        <section class="browsesellarea-heading">
          <h2>Looking for Tools?</h2>

          <div class="browsesellarea-area">
            <img src="Images/2925.jpg" alt="Browse Tools to Buy" />
          </div>
          <button>Browse Categories</button>

          <h2> Got a shed full of dusty tools?</h2>
          <div class="browsesellarea-area">
            <img src="Images/10975.jpg" alt="Browse Tools to Buy" />
          </div>
          <button>Sell Your Tools Here</button>

        </section>
      </section>
    </main>
  </div>
  <!-- FOOTER -->

  <footer class="footer">
    <div>
      <p>Copyright &copy; 2019</p>
    </div>

  </footer>

</body>

</html>

Answer 1

从position: absolute类中删除.browsesellarea-heading。因此，页脚不在底部

页脚不断出现在页面中间

1 个答案: