色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

頁腳沒有粘在頁面底部

CSS
錢淋西2年前8瀏覽0評論

讓我先說我是一個完全的新手，作為一個實習生和學生，我還在學習，我知道我的代碼是否不好或難以閱讀。我正在重新創建一個網站來練習，我怎么也想不出為什么頁腳沒有粘在頁面的底部。頁腳圖像未粘貼在主要內容下

這是我的代碼和目前為止我所擁有的代碼的副本。非常感謝任何幫助。

<body>

<div class="main-wrapper">

  <!-- Header -->

    <header>
      <div class="top-nav">
        <img class="ace-logo" src="images/store-location-logo.svg">
        <div class="searchbar">
          <input class="search-input" type="text" placeholder="What can we help you find?">
          <button class="search-button">
            <img class="icon-search" src="icons/icons8-search.svg">
          </button>
        </div>
        <div class="right-nav">
          <div class="account-info">
            <div class="icon-image">
              <img src="icons/header_user-circle-light_red.svg">
            </div>
            <div class="icon-content">
            <div class="icon-title">Hi there,</div>
            <div class="icon-info">Sign in | New Account</div>
            </div>
          </div>
          <div class="account-info">
            <div class="icon-image">
              <img src="icons/header_AR icon.svg">
            </div>
            <div class="icon-content">
            <div class="icon-title">Ace Rewards</div>
            <div class="icon-info">Learn more</div>
            </div>
          </div>
          <div class="account-info">
            <div class="icon-image">
              <img class="icon-cart" src="icons/header_shopping-cart-light.svg">
            </div>
            <div class="icon-content">
            <div class="icon-title">Cart</div>
            <div class="icon-info">0 Items</div>
            </div>
          </div>
        </div>
      </div>
        <div>
          <ul class="navbar">
            <li><a href="#">Departments</a></li>
            <li><a href="#">Sales & Specials</a></li>
            <li><a href="#">Local Ad</a></li>
            <li><a href="#">The Paint Studio</a></li>
            <li><a href="#">Ace Project Place</a></li>
            <li><a href="#">Ace Handyman Services</a></li>
          </ul>
      </div>
    </header>
    
  <!-- Main Content -->

    <main>
      <div class="content-container">
        <img class="content-picture" src="images/051523-aspot-aceRewards.jpg">
        <div class="content-info">
          <div class="content-info1">Ace Rewards Members</div>
          <div class="content-info2">ONLINE ONLY</div>
          <img src="icons/020623-10off.svg">
          <div class="content-info3">on Select Regular-Priced Items*</div>
        </div>
        <div class="content-icon">
          <img src="icons/acerewards2021_logo_horiz_white_white_stars_Exclusive.svg">
          <div class="reward-code">Use Code: <button class="reward-code-button">MAY15</button> In Cart</div>
          <div class="login-details-flex">
            <div class="sign-in-flex">
              <a class="login-details" href="#">Sign In</a>
              <div>or</div>
              <a class="login-details" href="#">Join Now</a>
            </div>
            <a class="login-details" href="#">*See Details.</a>
          </div>
        </div>
      </div>
      <div class="content-container2">
          <div class="desc-container">
            <div class="desc-container-top">
              <img class="ace-reward-logo-cont2" src="icons/acerewards2021_logo_horiz_white_white_stars_Exclusive.svg">
              <div class="desc-top-info1">Free Fuel All Month Long</div>
              <div class="desc-top-info2">with purchase of grill $399 and up*</div>
              <a class="login-details" href="#">*See Details.</a>
            </div>
            <div class="desc-container-bottom">
              <div class="desc-top-info1">Big Savings on the Best Grills</div>
              <div class="desc-top-info2">with purchase of grill $399 and up*</div>
            </div>
          </div>
          <div class="grill1-container">
            <img src="images/051623-a-traeger.jpg" alt="traeger grill" class="grill-img">
            <div class="grill-desc1">
              <a href="#"><span>Free 20lb of Reserve Pellets</span> when you buy any Traeger Pellet Grill $399 and up</a>
            </div>
          </div>
          <div class="grill1-container">
            <img src="images/051623-a-weber.jpg" alt="traeger grill" class="grill-img">
            <div class="grill-desc2">
              <a href="#"><span>Free tank refill or exchange</span> when you buy any Weber, Blackstone or Ooni Gas Grilll $399 and up</a>
            </div>
          </div>
          <div class="grill1-container">
            <img src="images/051623-a-bge.jpg" alt="traeger grill" class="grill-img">
            <div class="grill-desc3">
              <a href="#"><span>Free 17.6 lb bag of Big Green Egg Charcoal</span> when you buy any Big Green Egg Grill $399 and up</a>
            </div>
          </div>
      </div>
    </main>
  
  <!-- Footer -->
  
    <footer>
      footer
    </footer>
  </div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', Arial;
}

main {
  flex-grow: 1;
}

footer {
  position: absolute;
  bottom: 0;
  height: auto;
  width: 100%;
  padding: 15px;
  margin-top: auto;
  background-color: #424242;
}

我已經修改了html代碼，將頁眉和頁腳從主容器中取出，我還刪除了頁腳的固定位置，我希望這是你正在尋找的

HTML已更新:

<body>
      <header>
      <div class="top-nav">
        <img class="ace-logo" src="images/store-location-logo.svg">
        <div class="searchbar">
          <input class="search-input" type="text" placeholder="What can we help you find?">
          <button class="search-button">
            <img class="icon-search" src="icons/icons8-search.svg">
          </button>
        </div>
        <div class="right-nav">
          <div class="account-info">
            <div class="icon-image">
              <img src="icons/header_user-circle-light_red.svg">
            </div>
            <div class="icon-content">
              <div class="icon-title">Hi there,</div>
              <div class="icon-info">Sign in | New Account</div>
            </div>
          </div>
          <div class="account-info">
            <div class="icon-image">
              <img src="icons/header_AR icon.svg">
            </div>
            <div class="icon-content">
              <div class="icon-title">Ace Rewards</div>
              <div class="icon-info">Learn more</div>
            </div>
          </div>
          <div class="account-info">
            <div class="icon-image">
              <img class="icon-cart" src="icons/header_shopping-cart-light.svg">
            </div>
            <div class="icon-content">
              <div class="icon-title">Cart</div>
              <div class="icon-info">0 Items</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <ul class="navbar">
          <li><a href="#">Departments</a></li>
          <li><a href="#">Sales & Specials</a></li>
          <li><a href="#">Local Ad</a></li>
          <li><a href="#">The Paint Studio</a></li>
          <li><a href="#">Ace Project Place</a></li>
          <li><a href="#">Ace Handyman Services</a></li>
        </ul>
      </div>
    </header>

  <div class="main-wrapper">


    <main>
      <div class="content-container">
        <img class="content-picture" src="images/051523-aspot-aceRewards.jpg">
        <div class="content-info">
          <div class="content-info1">Ace Rewards Members</div>
          <div class="content-info2">ONLINE ONLY</div>
          <img src="icons/020623-10off.svg">
          <div class="content-info3">on Select Regular-Priced Items*</div>
        </div>
        <div class="content-icon">
          <img src="icons/acerewards2021_logo_horiz_white_white_stars_Exclusive.svg">
          <div class="reward-code">Use Code: <button class="reward-code-button">MAY15</button> In Cart</div>
          <div class="login-details-flex">
            <div class="sign-in-flex">
              <a class="login-details" href="#">Sign In</a>
              <div>or</div>
              <a class="login-details" href="#">Join Now</a>
            </div>
            <a class="login-details" href="#">*See Details.</a>
          </div>
        </div>
      </div>
      <div class="content-container2">
        <div class="desc-container">
          <div class="desc-container-top">
            <img class="ace-reward-logo-cont2" src="icons/acerewards2021_logo_horiz_white_white_stars_Exclusive.svg">
            <div class="desc-top-info1">Free Fuel All Month Long</div>
            <div class="desc-top-info2">with purchase of grill $399 and up*</div>
            <a class="login-details" href="#">*See Details.</a>
          </div>
          <div class="desc-container-bottom">
            <div class="desc-top-info1">Big Savings on the Best Grills</div>
            <div class="desc-top-info2">with purchase of grill $399 and up*</div>
          </div>
        </div>
        <div class="grill1-container">
          <img src="images/051623-a-traeger.jpg" alt="traeger grill" class="grill-img">
          <div class="grill-desc1">
            <a href="#"><span>Free 20lb of Reserve Pellets</span> when you buy any Traeger Pellet Grill $399 and up</a>
          </div>
        </div>
        <div class="grill1-container">
          <img src="images/051623-a-weber.jpg" alt="traeger grill" class="grill-img">
          <div class="grill-desc2">
            <a href="#"><span>Free tank refill or exchange</span> when you buy any Weber, Blackstone or Ooni Gas Grilll $399 and up</a>
          </div>
        </div>
        <div class="grill1-container">
          <img src="1.jpg" alt="traeger grill" class="grill-img">
          <div class="grill-desc3">
            <a href="#"><span>Free 17.6 lb bag of Big Green Egg Charcoal</span> when you buy any Big Green Egg Grill $399 and up</a>
          </div>
        </div>
      </div>
    </main>


  </div>
  <footer>
      footer
    </footer>

CSS已更新:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', Arial;
  }

  main {
    flex-grow: 1;
  }

  footer {
    height: auto;
    width: 100%;
    padding: 15px;
    margin-top: auto;
    background-color: #424242;
  }