Question

如何将页脚一直延伸到页面底部，以便覆盖所有空白区域？

<div class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                <img src="images/logo_footer.png" class="logo_footer"> <small>&copy; 2014 by SI2S, LLC. All rights reserved.</small>
                </div>
            </div>
        </div>
    </div>

Answer 1

感谢http://peterned.home.xs4all.nl/examples/csslayout1.html

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* needed for container min-height */
}


div#pageContainer {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto; /* center, not in IE5 */
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height: 100%; /* real browsers */
}


div#content {
    padding-bottom: 200px; /* bottom padding for footer */
}

div#footer {
    position: absolute;
    width: 100%;
    bottom: 0; /* stick to bottom */
}

然后：

<div id="pageContainer">

    <div id="header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12"> <!-- or whatever column spec -->
                    <!-- header content here -->
                        </div>
                    </div>
            </div>
        </div>

    <div id="content">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12"> <!-- or whatever column spec -->
                    <!-- main page content here -->
                    </div>
                    </div>
            </div>
        </div>

    <div id="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12"> <!-- or whatever column spec -->
                    <!-- footer content here -->
                        </div>
                    </div>
                </div>
        </div>
</div>

Answer 2

按照以下代码添加页脚css文件：

.footer-bottom
{
    position:fixed;
    bottom:0px;
}

Answer 3

html,body {
   height: 100%
}
.footer-bottom {
   position:relative;
   bottom:0;
}

在某些情况下，页脚的容器也应该height:100%

Answer 4

<强> CSS

.footer-bottom {
    position: relative;
    bottom: 0;
}

CSS：如何将页脚一直扩展到页面底部？

4 个答案: