Question

即使内容不足以填充页面，我也试图实现页脚底部的页脚。

这是JSFiddle link

虽然我能够将页脚放到底部，但我遇到了另一个问题。我希望内容延伸到页脚，以便示例中的背景（aliceblue）延伸到页脚。目前，我无法正常工作，所以我需要一些帮助。

这是代码。

HTML

<body>
    <div class="wrap">
        <div class="container"> <!-- Bootstrap specific -->
            <div class="header">Header here</div>
            <div class="content">
                <p>website content here.</p>
                <p>website content here.</p>
            </div>
            <div class="push"></div>
        </div>
    </div>
    <div class="container"> <!-- Bootstrap specific -->
        <div class="footer">
            <p>Footer Here</p>
        </div>
    </div>
</body>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; 
    background-color:wheat;
}
.header {
    height:25px;
    background-color: lightgreen;
}
.content {
    background-color: aliceblue;
}
.footer, .push {
    height: 50px;
}
.footer {
    background-color:lightblue;
}

Answer 1

让我们使用Stickyfooter =）

<强> HTML

<div id="wrap" class="container">
    <div id="main" class="content">
        <div class="header">Header here</div>
        <p>website content here.</p>
        <p>website content here.</p>
    </div>
</div>
<div id="footer" class="footer">
    <p>Footer Here</p>
</div>

<强> CSS

/*  
Sticky Footer Solution
by Steve Hatcher 
***
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
    overflow:auto;
    padding-bottom: 50px;
    }  /* must be same height as the footer */
#footer {position: relative;
    margin-top: -50px; /* negative value of footer height */
    height: 50px;
    clear:both;} 
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/*==========
your styles*/
body {
    background-color:wheat;
    }
.header {
    height:25px;
    background-color: lightgreen;
    }
.container {
    background-color: aliceblue;
    padding:0;
}
.content {
    padding:0 15px;
}
.footer {
    background-color:lightblue;
}

页面底部的页脚，内容在两者之间拉伸

1 个答案: