正文文本很长时，页脚不会停留在屏幕底部

时间：2016-10-17 11:38:04

标签： html css

我有一个问题，当我有很多身体内容时，我的页脚不会停留在屏幕的底部。

显示问题的图片：

Problem Image

任何帮助将不胜感激

/*Footer */

.footerwrap {
  position: absolute;
  width: 100%;
  height: 155px;
  left: 0;
  bottom: 0;
  padding-top: 20px;
  box-sizing: border-box;
  vertical-align: bottom;
}
.footer_container {
  background-color: #1E90FF;
  text-align: center;
  width: 980px;
  margin: 0 auto;
  height: auto;
}
.footerarea {
  float: left;
  width: 100%;
  background-color: #E8E8E8;
  padding-top: 15px;
}
.footerarea ul {
  padding: 2px;
  margin: 8px;
}
.footerarea li {
  color: yellow;
}
.footerarea ul li {
  line-height: normal;
  margin-bottom: 8px;
  text-align: center;
}
.footerarea ul li a,
visited {
  color: #555;
  font-style: normal;
  font-weight: normal;
}
.footerarea ul li a:hover {
  color: #1E90FF;
  font-weight: bold;
}
.footerarea h3 {
  font-style: normal;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  padding-bottom: .5em;
  color: #555;
  border-bottom: 2px solid #fff;
}
#footer-legals .contentinfo {
  text-align: center;
}
#footer-legals .contentinfo ul {
  margin: 0;
  padding: 0;
}
#footer-legals .contentinfo li {
  padding: 0;
  margin: 0 10px;
  display: inline;
}
#footer-legals .contentinfo a:link {
  color: #FFF;
}
#footer-legals p {
  color: #FFF;
}
footer-block-a ul,
.footer-block-a li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-texts-bottom {
  float: none;
  width: auto;
  clear: both;
}
<footer class="footerwrap">
  <div class="footer_container clearfix">
    <div class="footerarea">
      <div class="col-sm-3">
        <h3>Company Details</h3>
        <ul>
          <li class=""><a href="/alphacomponents.co.uk/aboutus.php">About<span></span></a>
          </li>
          <li class=""><a href="/alphacomponents.co.uk/contactus.php">Contact<span></span></a>
          </li>
          <li class=""><a href="/alphacomponents.co.uk/terms&conditions.php">Terms & Conditions<span></span></a>
          </li>
          <li class=""><a href="/alphacomponents.co.uk/privacypolicy.php">Privacy Policy<span></span></a>
          </li>
        </ul>
        <h3></h3>
      </div>
      <div class="col-sm-3">
        <h3>Returns</h3>
        <ul>
          <li class=""><a href="/alphacomponents.co.uk/requestAreturn.php">Request a return<span></span></a>
          </li>
          <li class=""><a href="/alphacomponents.co.uk/packagehelp.php">How to package your return<span></span></a>
          </li>
          <li class=""><a href="/alphacomponents.co.uk/returnspolicy.php">Returns Policy<span></span></a>
          </li>
        </ul>
        <h3></h3>
      </div>
      <div class="col-sm-3">
        <h3>Support</h3>
        <ul>
          <li class=""><a href="/alphacomponents.co.uk/support_helpline.php" rel="ext">Support helpline<span></span></a>
          </li>
        </ul>
        <h3></h3>
      </div>
      <div class="col-sm-3">
        <h3>Connect With Us</h3>
        <ul>
          <a class="btn btn-primary social-login-btn social-facebook" href="fb.me/alphacomponentsUK"><span class="fa fa-facebook"></span></a>
          <a class="btn btn-primary social-login-btn social-twitter" href="www.twitter.com/alphacomponents"><span class="fa fa-twitter"></span></a>
          <a class="btn btn-primary social-login-btn social-linkedin" href="www.linkedin.com/alphacomponents"><span class="fa fa-linkedin"></span></a>
          <a class="btn btn-primary social-login-btn social-google" href="www.google.com/alphacomponents"><span class="fa fa-google-plus"></span></a>
        </ul>
        <h3></h3>
      </div>
    </div>
    <div class="footer-texts-bottom"></div>
    <div id="footer-legals" class="footer-block">
      <div class="contents">
        <div class="footer-social">
          <ul></ul>
        </div>
        <div role="contentinfo" class="contentinfo">
          <ul class="contentinfo-legal">
            <li class=""><a href="/alphacomponents.co.uk/terms&conditions.php" id="Terms&ConditionsLink">Terms &amp; Conditions</a>
            </li>
            <li class=""><a href="/alphacomponents.co.uk/privacypolicy.php" id="PrivacyPolicyLink">Privacy Policy</a>
            </li>
            <li class="last-of-type"><a href="/alphacomponents.co.uk/deliverydetails.php" id="DeliveryDetailsLink">Delivery Details</a>
            </li>
          </ul>
          <p class="copyright OneLinkNoTx">© 2016 Alpha Components. All Rights Reserved.</p>
        </div>
        <!-- End of contentinfo -->
      </div>
      <!-- End of contents -->
    </div>
    <!-- End of footer-legal -->
  </div>

</footer>
<!-- End of footer -->
</div>
<!-- End of wrapper -->

2 个答案:

答案 0 :(得分：1)

解决方案可能只是在

中使用position: fixed 
.footerwrap{
   position: fixed;
   width: 100%;
   height: 155px;
   left: 0;
   bottom: 0;
   padding-top: 20px;
   box-sizing: border-box;
   vertical-align: bottom;
}

您可能需要在页面底部添加一些填充等于页脚的高度，以确保当用户滚动到页面底部时所有内容都可见。

作为演示，请参阅以下内容：

.footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: rgba(66, 66, 66, 0.8);
  text-align: center;
}
.content {
  padding-bottom: 100px;
}
.footer p {
  color: white;
  font-size: 2.0em;
}
<div class="content">
  <h1>The Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae mollis neque, sit amet tincidunt ipsum. Sed nibh dolor, gravida ullamcorper pellentesque eget, venenatis a elit. Nullam faucibus eleifend metus, blandit pulvinar felis dapibus vel. Quisque mattis elit eget mauris malesuada gravida. Pellentesque vestibulum ex sit amet nunc vestibulum tempus. Ut ultricies nec tortor eleifend consequat. Maecenas sit amet tristique orci. Donec quis sem velit. Maecenas convallis mattis ante, sed eleifend tortor congue ac. Donec varius ullamcorper mi. 
Aenean ante turpis, malesuada vel tortor et, dignissim aliquam lectus.</p>
</div>
<div class="footer">
  <p>The footer</p>
</div>

答案 1 :(得分：0)

您可以使用以下html和css

＆＃13;
＆＃13; 
<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题