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

Question

I have an issue where my footer doesn't stay at the bottom of the screen when I have a lot of body content.

Image showing the problem:

Any help will be appreciated

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

Answer 1

The solution may be simply to use position: fixed in

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

You will probably have to add some padding to the bottom of your page equal to the height of the footer to make sure that all content is visible when the user scrolls to the bottom of the page.

As a demonstration, see the following:

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

Answer 2

You can use the following html and css

 html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; } .demo h1 { margin-top: 0; } .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; }

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