让页脚停留在所有内容的底部

debugcn 发表于 Dev

内多

我找到了堆栈溢出的解决方案（这是解决方案）：

footer
{
position:fixed; 
bottom:0;
width:100%; 
height:auto;
margin-top: 30px;
background-color: green;
}

问题是：它确实将内容保留在页面底部，问题在于它位于内容后面。我想说的问题是：我希望页脚停留在页面底部，如果添加了更多内容，我希望页脚内容停留在页面底部，我在解决这个问题时遇到了问题. 我确实尝试将底部值设为 1 和 -1，但滚动条不明显，因此这不是解决整个问题的方法。

我从此处的 youtube 视频中获得的 html、正文和包装器 CSS：页脚粘到底部视频无法正常工作非常感谢！

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  margin-top: 30px;
  background-color: green;
}

#homepage {
  background-image: url(images/home_image.jpeg);
  background-size: cover;
}


/* MEDIA QUERIES */


/* Smaller/Older Smartphones */

@media screen and (max-width: 360px) {}


/* Regular Smartphones */

@media screen and (min-width: 360px) and (max-width: 480px) {}


/*#################################
###################################
###################################
#################################*/


/* BIGGER PHONES */

@media screen and (min-width: 480px) and (max-width: 768px) {}


/*#################################
###################################
###################################
#################################*/


/* Regular Tablets */

@media screen and (min-width: 768px) and (max-width: 1024px) {}


}

/*#################################
###################################
###################################
#################################*/

/* Large Tablets/Small Computers */
@media screen and (min-width: 1024px) and (max-width: 1366px) {}

/*#################################
###################################
###################################
#################################*/

/* Large Tablets/Small Computers */
@media screen and (min-width: 1366px) {
  /* HOMEPAGE */
  
  .footer-contain h1 {
    margin: 20px 25% 0px;
    color: black;
    text-align: center;
    font-size: 60px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<!-- START OF HEAD -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Nerdo Development Homepage</title>
  <!-- CSS STYLES -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="specificdevicestyles.css">
</head>
<!-- END OF HEAD -->
<!-- START OF BODY -->

<body id="homepage">
  <div id="wrapper">
    <!-- NAVIGATION BAR -->
    <section id="navigation">
      <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="index.html">Nerdo Development</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navB" aria-controls="navB" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>

        <div class="collapse navbar-collapse" id="navB">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">About Us</a>
            </li>
            <div class="dropdown show">
              <a class="btn nav-link dropdown-toggle text-left" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Examples
                          </a>

              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item" href="webdesignexamples.html">Web Designs</a>
                <a class="dropdown-item" href="businesscardsexamples.html">Business Cards</a>
                <a class="dropdown-item" href="clients.html">Clients We Have Worked With</a>
              </div>
            </div>
            <li class="nav-item">
              <a class="nav-link" href="services.html">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="pricing.html">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact Us</a>
            </li>
          </ul>
        </div>
      </nav>
    </section>
    <!-- END OF NAVIGATION BAR -->
    <!-- START OF HOMEPAGE -->
    <section>
      <div class="container footer-contain">
        <div class="row text-center">
          <div class="col-md">
            <h1 class="homepageQuote">We <strong>specialize</strong> in creating <strong>appealing</strong> websites for <strong>small</strong> businesses across the world for an <strong>inexpensive cost</strong></h1>
          </div>
        </div>
        <br>
        <div class="row text-center button-special">
          <div class="col-md">
            <button type="button" class="btn btn-lg"><a href="about.html">About our Team</a></button>
          </div>
          <div class="col-md button-margin">
            <button type="button" class="btn btn-lg"><a href="services.html">Our Services</a></button>
          </div>
        </div>
      </div>
    </section>
    <!-- END OF HOMEPAGE -->
    <!-- START OF FOOTER -->
    <footer class="footer text-center">
      <div class="container footer-main-alpha">
        <div class="row footer-settings">
          <div class="col-md">
            <h5>Our Mission To You</h5>
            <h5>Our objective is to create the software or website you want. We give our 100% effort into completing and satisying your needs and wants.</h5>
          </div>
          <div class="col-md">
            <blockquote class="blockquote">
              <h4>"Design is not just what it looks like and feels like. Design is how it works."<span class="blockquote-footer">Steve Jobs</span></h4>
            </blockquote>
          </div>
          <div class="col-md">
            <h1>Navigate Around</h1>
            <h6><a href="index.html">Home</a> | <a href="about.html">About Us</a></h6>
            <h6><a href="webdesignexamples.html">Examples</a> | <a href="services.html">Our Services</a></h6>
            <h6><a href="pricing.html">Our Pricing</a> | <a href="contact.html">Contact Us</a></h6>
          </div>
        </div>
      </div>
      <!-- SOCIAL MEDIA -->
      <div class="container footer-social">
        <div class="row footer-settings">
          <div class="col-md following">
            <h5><span>Follow us on Social Media!</span></h5>
            <ul class="list-inline">
              <li class="list-inline-item">
                <a href="https://twitter.com/NerdoDevelopme1" target="_blank"><img src="images/icon_twitter.png"></a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.facebook.com/nerdodevelopment/" target="_blank"><img src="images/icon_facebook.png"></a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.instagram.com/nerdodevelopment/?hl=en" target="_blank"><img src="images/icon_instagram.png"></a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.linkedin.com/in/nerdo-development-2533b1166/" target="_blank"><img src="images/icon_linkedin.png"></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container footer-copyright footer-settings">
        <h6>Nerdo Development Copyright &copy; 2018; All Rights Reserved</h6>
      </div>
    </footer>
    <!-- END OF FOOTER -->
  </div>



</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</html>

马丁

CSS定位：

你有：

 position: fixed;

在你的 CSS 中。

简而言之，这意味着元素相对定位并固定在页面的屏幕视图上，因此元素永远不会离开页面的视口窗口。这将是页面比屏幕长的最明显的问题，因为元素永远不会滚动。

您实际需要的是position:absolute;元素相对于其父元素以固定方式定位。

如MDN 手册所述：

Absolute：

该元素已从正常文档流中移除，并且不会在页面布局中为该元素创建空间。如果有的话，它是相对于其最近定位的祖先定位的；否则，它相对于初始包含块放置。它的最终位置由顶部、右侧、底部和左侧的值决定。

当 z-index 的值不是 auto 时，此值会创建一个新的堆叠上下文。绝对定位框的边距不会与其他边距折叠。

因此，您需要为absolutely 定位的元素设置一个有效的 z-index 值，以确保它保持在页面上其他内容的上方而不是下方。

最后;

我个人也有一种潜移默化的感觉，即绝对定位元素（您的页脚）的父元素也应该设置为非静态relative定位。

因此我想你的页脚 css 应该是这样的：

footer {
  position: absolute;
  z-index: 1000  /* Always on top */
  bottom: 0;
  width: 100%;
  height: auto;
  margin-top: 30px;
  background-color: green;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。