Question

这很简单我很确定，但我很难过。

我在网页上有一个页脚，我想要做的就是确保它始终是从底部固定的高度，但是指定页面的最小高度，这样它就不会在内容div上崩溃，并且而是滚动。

有什么想法吗？

<div class="height">
square box
</div>

<div class="height2">
horozontal box
</div>

.height {
    background-color: hsla(121,90%,48%,1);
    position: fixed;
    height: 100px;
    width: 100px;
    left: 100px;
    top: 50px;
}
.height2 {
    background-color: hsla(359,90%,48%,1);
    position: fixed;
    height: 50px;
    width: 100%;
    left: 0px;
    bottom: 60px;
}

Answer 1

以下是我用来锁定页脚的示例，希望这对您有所帮助。

.Footer 
{
    clear: both;
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: normal;
    background: #4b6c9e;
    color: #FFFFFF;
    font-weight: bold;
    position: absolute;
    bottom: 0; /* stick to bottom */
    margin: 0;
    padding: 8px 0px 0px 0px;
}

<div id="Footer" class="Footer ui-corner-all">
<span style="float: left; vertical-align: middle; padding: 5px">
</span>
<span id="clock" style="float: right; vertical-align: middle; padding: 5px">
</span>
</div>

Answer 2

你的意思是这样吗......？

http://jsfiddle.net/vF4L3/3/

.body {
    position:relative;
    width:100%;
    min-height:100%;
    margin-bottom:-150px;
    padding-bottom:150px;
    background:#CCC;    
}

.footer {
    position:fixed;
    bottom:50px;
    height:100px;
    width: 100%;
    background:#C00;
}

“崩溃内容”是什么意思？ 如果你能详细说明，我相信我可以提供帮助。

指定最小高度divs以停止页脚div崩溃的身体div

2 个答案:

http://jsfiddle.net/vF4L3/3/