Question

我正试图在我的网站上制作主体内容类为＆＃34; .interior-health-main＆＃34;在页面底部有一个静态的页脚。我希望它在绝对底部，目前如果你在大屏幕上查看我的一些页面，你会在页脚后面看到一堆空白区域。我想摆脱这个。

我一直在研究这几个小时并试了很多东西，起初我打算在页面底部静止整个网站的页脚，但是将页脚的css设置为位置：绝对与我主页上的其他元素冲突，这就是为什么我只想在＆＃34; .interior-health-main。＆＃34;如果有可能只为这些页面上的页脚更改它，请告诉我，我真的不想要通过将整个主体设置为相对位置来修复此问题的示例。它只会弄乱我的主页。

以下是页脚http://codepen.io/aahmed2/full/KgWNYL/

后面的空白区域示例

<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
    <div class="container">

        <ol class="breadcrumb">
            <li><a href="/index.asp">Home</a></li>
            <li><a href="/health-resources.asp">Health Resources</a></li>
            <li class="active">Sample Short Page</li>
        </ol>
    <h2>Sample Short Page</h2>



    </div>
</div>

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h4>Contact Us</h4>
        <p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
        <div class="affiliates">
          <a href="http://www.unl.edu/"><img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark"></a>
          <a href="http://extension.unl.edu/"><img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo"></a>
        </div>
      </div>

      <div class="col-sm-4">
        <h4>Quick Links</h4>
        <p><a href="#">Human Health</a></p>
        <div class="line"></div>
        <p><a href="/resources/pet-diseases.asp">Pet Diseases</a></p>
        <div class="line"></div>
        <p><a href="/resources/livestock-disease.asp">Livestock Diseases</a></p>
        <div class="line"></div>
        <p><a href="/resources/events.asp">Events</a></p>
        <div class="line"></div>
      </div>

      <div class="col-sm-4">
        <h4>Attention</h4>
        <p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
        <h5><a class="partner" href="#">Partners &amp Stakeholders</a></h5>

      </div>
    </div>

    <div class="copyright">
      <div class="col-xs-9">
        <h6>© 2016 Nebraska One Health. <a href="/sitemap.asp">Site Map.</a></h6>
      </div>

      <div class="col-xs-3">
        <a href="#"><img class="social  pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon"></a>
        <a href="https://www.facebook.com/nebraskaonehealthresources/"><img class="social  pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon"></a>
      </div>
    </div>
  </div>
</div>

这是我的css

.nav {
  text-align: center;
  padding: 25px 0;
  background-color: #c1c0be;
  color: #fff;
  position: fixed;
  width: 100%;
  z-index: 2;
}

.interior-health-main {
  padding-top: 80px;
  padding-bottom: 20px;
}

@media (max-width: 479px) {
  .interior-health-main {
    padding-top: 50px;
  }
}

.footer {
  background: #333332;
  border-top: 9px solid #ffffff;
  color: #fff;
  padding-top: 35px;
  padding-bottom: 35px;
}

Answer 1

你可以像在这里一样绝对地定位页脚

https://getbootstrap.com/examples/sticky-footer/

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  /* background-color: #f5f5f5; */
}

<footer class="footer">
    <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
</footer>

当你尝试自己的方式时，它是如何冲突的？用你做的更新你的帖子？

Answer 2

我将您的页面（不包含页脚）包装到.page-wrap div中，然后编辑codePen代码，只需将这段代码添加到您的CSS中

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height (with margin and border) */
  margin-bottom: -299px ; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.footer, .page-wrap:after {
  /* page-wrap after content must be the same height as footer */
    height: 299px; 
}

Demo

Answer 3

请参考this question找到您的解决方案。

我将上述链接中的一个解决方案应用到您的代码中。

将您的代码包裹在#holder div。

中

添加以下CSS：

html,body{
height: 100%
}

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

.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px; 
width:100%;
position: absolute;
left: 0;
bottom: 0; 
}

.interior-health-main {
padding-top: 80px;
padding-bottom: 300px;    /* height of footer */
}

这是工作小提琴： https://jsfiddle.net/DTcHh/25475/

使页脚停留在页面底部（不固定到底部）

3 个答案: