Question

我的基本html布局有一个小css问题。

这是什么:(没有内容）

正如您所看到的，页脚仍然卡住，并且不会像我想要的那样到达页面底部。

CSS：

body {
    background-color: blue;
        color:red;
    margin: 75px auto 50px;
    height:100%;
}
div#fixedheader {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:75px;
    background:yellow;
}
div#fixedfooter {
    position:absolute;
    bottom:0px;
    height:50px;
    left:0px;
    width:100%;
    background:black;
}

有什么方法可以解决吗？

由于

Answer 1

<强>更新

我已经将DOM更改为标题和页脚的HTML5标签，我还添加了一些JavaScript，可以对窗口大小调整做出反应。因此，如果您的窗口高度超过文档高度，则页脚绝对位于底部，如果页脚未定位在内容之上此外，如果向下滚动并且标题不再可见，它也会固定在内容上方 http://jsfiddle.net/cge89ef4/8/

更新结束

此处http://jsfiddle.net/cge89ef4/3/

将页脚的绝对值更改为固定

position:fixed;

如果您不希望页脚在任何时候与您的内容重叠，您应该使用页脚的高度为内容容器添加边距或填充底部。

此外，您可以查看HTML5标记，因为已经为页眉，页脚等预设了标记名称

例如：

<header></header>
<article><section></section></article>
<aside></aside>
<footer></footer>

Answer 2

只需确保将position: fixed提供给标题，如果您希望页脚不会一直修复，请使用min-height。

body {
    background-color: blue;
    color: red;
    margin: 75px auto 50px;
    height: 100%;
}
div#fixedheader {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 75px;
    background: yellow;
}
div#fixedfooter {
    position: fixed;
    bottom: 0px;
    height: 50px;
    left: 0px;
    width: 100%;
    background: black;
}

小提琴： http://jsbin.com/behajakuse/1/edit?html,css,output

Answer 3

将这种造型用于您的身体

call xxx.yyy()

Answer 4

拥有身体position: relative;

HTML布局（基本） - CSS问题

4 个答案: