Question

我正在创建一个响应式网站并将页面分为三部分

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

“标题”和“页脚”的高度现在是30px如何设置“内容”的高度，通过该内容我可以用较少的内容显示整页内容。

这意味着如果我们在ipad中打开这个页面，那么它的高度就比桌面高，所以页脚在屏幕之间显示我如何将它放在任何屏幕的底部。

我不想设置位置：固定;因为当内容超过屏幕

时，它总是设置为底部所以问题

Answer 1

.header, .footer{
    height:30px;
    background: #000000;
}

.content {
    background : #ff0000;
    min-height: calc(100% - 60px);
}

body, html {
    height: 100%;
}

DEMO：http://jsfiddle.net/VsAUV/3/

如果您想支持旧版浏览器，请执行以下操作：http://css-tricks.com/snippets/css/sticky-footer/

如何设置内容部分的完整高度

1 个答案: