0

首先，查看我拥有的布局的一个工作示例：http: //jsfiddle.net/EPC8c/2/

我想要做的是为此添加一个上边距。因为我的大部分内容都建立在 100% 的高度上，所以在尝试这个时事情会变得有点奇怪：http: //jsfiddle.net/EPC8c/1/（固定链接）

流畅的布局现在使页脚被向下推到页面的 0% 或 100% 之后。这可能按预期工作，但我正在尝试找到一种不会导致这种情况的解决方案。

对此的任何帮助将是惊人的。

HTML

<div id="container">

    <header></header>

    <div id="content"></div>

    <footer></footer>

</div>

CSS

html, body {
    background: #ff3333;
    margin:0;
    padding:0;
    height:100%;
}

#container {
    position:relative;
    background: #FFF;
    margin: 0 auto;
    width: 200px;
    min-height:100%;
}
header {
    height: 60px;
    background: #888;
}
#content {
    background: #FFF;
    min-height: 200px;
    padding-bottom: 60px; /*FOOTER HEIGHT*/
}

footer {
    position:absolute;
    bottom: 0;
    width: 200px;
    height: 60px;
    background: blue;
}
4

2 回答 2

1

这是一个解决方案，由这个问题提供： CSS 100% height with padding/margin

JSFiddle：http:
//jsfiddle.net/EPC8c/5/

HTML：

<div id="wrapper">
    <div id="container">
        <header></header>
        <div id="content">

        </div>
        <footer></footer>
    </div>
</div>

CSS：

#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
于 2012-10-10T23:03:07.703 回答
0

诚然，这不是最好的解决方案，它依赖于百分比边距，但一种方法是将它全部包装在一个绝对定位的 div 中，具有百分比上填充和负（相等）百分比底部填充。像这样：

http://jsfiddle.net/EPC8c/3/

<div id="wrapper">
    <div id="container">
        <header></header>
        <div id="content">

        </div>
        <footer></footer>
    </div>
</div>

CSS：

#wrapper {
position: absolute;
width: 100%;
height: 90%;    
padding-top: 10%;
padding-bottom: -10%;
}
于 2012-10-10T22:57:29.483 回答