CSS定位：

Question

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

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

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

我从youtube视频获取的html，正文和包装CSS：Footer Stick to Bottom video that didn't properly work 非常感谢！

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

CSS定位：

你有：

 position: fixed;

在你的CSS中

。

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

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

正如the MDN Manual所述：

<强> Absolute

该元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。它相对于最近的祖先（如果有的话）定位;否则，它相对于初始包含块放置。它的最终位置由顶部，右侧，底部和左侧的值决定。

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

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

最后;

我个人也有一种偷偷摸摸的感觉，绝对定位元素（你的页脚）的Parent元素也应该设置为非静态relative定位。

因此，我认为你的页脚css应该是这样的：

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

Answer 2

最好使用position: fixed作为页脚元素。绝对定位仅将元素放置在最接近其定位祖先的精确位置。

对于一个工作示例，此页面的顶部栏设置为固定定位，如CSS管理它所示：

.top-bar._fixed {
  position: fixed;
  min-width: auto;
  box-shadow: 0 1px 0 rgba(12,13,14,0.1),0 1px 6px rgba(59,64,69,0.1);
}

关于CSS定位的更多参考资料，W3学校涵盖了here。另外，正如Martin上面发布的那样，您希望进行测试以确保将z-index设置为可接受的值。如果您在页面上有其他元素使用它（例如响应式导航），请确保没有冲突。

希望这有帮助。

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

2 个答案:

CSS定位：

最后;