Question

我试图弄清楚如何使用以下方法创建布局：
- 固定高度的头部而不是固定的 - 两个侧边栏（每侧一个）
- 侧边栏之间的一列 - 在页面底部粘贴的固定高度页脚，并根据内容移动（此处是问题，可能）

我看过很多类似的问题，但没有一个看到过3列的问题。我不确定，但我认为这与浮动内容列有关。

这是HTML代码：

<div id="wrapper">
<div id="header">Header is ok</div>
<div id="container">
    <div id="column-left"></div>
    <div id="content"></div>
    <div id="column-right"></div>
</div>
<div id="footer"></div>

这是CSS代码：

html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
height: 100%;
position:relative;
}
#header {
background: green;
height: 60px;
position: absolute;
width: 100%;
}
#container {
margin: 0 auto;
width: 80%;
padding-top: 60px; /* size of header */
padding-bottom: 100px; /* size of footer */
background: red;
height: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
#column-left {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#column-right {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#content {
float: left;
width: 60%;
min-height: 100%;
background: pink;
}

以下是我添加一些内容时发生的事情的示例： http://jsfiddle.net/Lzp67xyu/

Answer 1

请参阅此fiddle

将#footer的定位更改为relative，并将clear:both添加到#footer。

也就是说，#footer的CSS就像

#footer {
    clear: both;
    position:relative;
    bottom:0;
    width:100%;
    height: 100px;
    background: blue;
}

根据docs

clear属性指定元素的哪一侧浮动元素不允许浮动。

Answer 2

在容器中放置一个边距底部，其中的列将保留在页脚下方的空间。

.columnncontainer{
    width:80%;
    margin-bottom:50px;
    background-color:yellow;
    display:inline-block;
}

这是我提出的JSFiddle示例： http://jsfiddle.net/y5xwop8h/1/

页脚总是在底部，3列

2 个答案:

请参阅此fiddle