Question

我正在使用display: table技术开发一个基本的粘性页脚模板。它在Chrome中运行得很好，但在 Firefox 和 IE 不是：页脚被内容推开。

显然我在这里缺少一些基本的东西，我是CSS的新手，所以原谅我。

这是一些代码：

HTML

<div id="container">
    <div id="header" class="row">Header</div>
    <div id="content" class="row">
        <p>some content 1</p>
        <p>some content 2</p>
        <p>some content 3</p>
        ...
    </div>
    <div id="footer" class="row">Footer</div>
</div>

和CSS

html, body{ 
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
#container{
    width: 100px;
    height: 100%;
    display: table;
}
.row{
    display: table-row;
    position: relative;
}
#header, #footer{
    height: 50px;
}
#content{
    float: left;
    height: 100%;
    width: 100%;
    overflow: auto;
}

DEMO HERE

谢谢

Answer 1

从float:left

中删除#content

Updated demo

<强>更新

鉴于需要可滚动的中间部分和固定高度页眉和页脚，我会使用固定定位而不是display：table;

#header, #footer, #content {
    position:fixed;
    left:0;
    width:100%;
}
#header, #footer {
    background:red;
}
#header {
    top:0;
    height:50px;
}
#footer {
    bottom:0;
    height:50px;
}
#content {
    top:50px; /*height of header*/
    bottom:50px; /*height of footer*/
    overflow:auto;
    padding:0;
}

<div id="header" class="row">Header</div>
<div id="content" class="row">
            <p>some content 1</p>
            <p>some content 2</p>
            <p>some content 3</p>
            <p>some content 4</p>
            <p>some content 5</p>
            <p>some content 6</p>
            <p>some content 1</p>
            <p>some content 2</p>
            <p>some content 3</p>
            <p>some content 4</p>
            <p>some content 5</p>
            <p>some content 6</p>
            <p>some content 1</p>
            <p>some content 2</p>
            <p>some content 3</p>
            <p>some content 4</p>
            <p>some content 5</p>
            <p>some content 6</p>
</div>
<div id="footer" class="row">Footer</div>

粘性页脚显示表不适用于Firefox / IE

1 个答案: