CSS 帮助修复溢出的 div

Question

我基本上在一个网页中有三个部分 (div)。

1. 标题
2. 内容
3. 页脚

三个div都有绝对位置。问题是当内容 div 有更多文本并增加高度时，它会重叠在页脚 div 上(在小屏幕设备上会造成更多问题)。我希望页脚 div 根据内容 div 的高度向下移动。

如何在不删除标题和内容 div 的绝对位置的情况下执行此操作？当前的 div 样式如下:

.header{
position:absolute;
top: 0px;
left: 40px;}

.content{float:left;
margin:40px;
position:absolute;
top:200px;
max-width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;}

.footer{height:auto;
left:40px;
position:absolute;
width:20%;
z-index:1000}

请帮忙。 谢谢。

Answer 1

我不完全确定您要做什么，但您很可能需要从内容部分删除 position: absolute;。我设置了一个快速的 JSFiddle 来演示我将使用的技术:

http://jsfiddle.net/TrnLm/

HTML:

<header></header>
<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra iaculis quam, in porttitor risus imperdiet id. Proin molestie libero eu mi hendrerit semper ac ac sem. Sed risus mauris, scelerisque nec nisi ut, auctor elementum neque. Donec eget risus ultricies sem lobortis viverra non eget justo. Aenean laoreet tellus non sapien tincidunt, nec egestas diam aliquet. Maecenas a tincidunt arcu. Phasellus egestas quam tortor, semper dignissim massa commodo sed. Aliquam erat volutpat. Fusce sed diam suscipit, ornare lacus ac, vulputate lacus. Curabitur imperdiet felis vitae ipsum rutrum sagittis.</p>
    <p>Pellentesque non bibendum nisi. Donec pulvinar diam mattis, cursus ipsum tempus, commodo sapien. Sed id suscipit massa. Proin eu tincidunt urna. Ut ultricies hendrerit mollis. Mauris sollicitudin tincidunt augue vitae tincidunt. Maecenas aliquam fermentum varius. Aenean nec velit venenatis, gravida massa nec, semper velit. Etiam sagittis magna at lorem fermentum pulvinar.</p>
    <p>Nunc tristique posuere velit. Quisque sodales diam nunc. Nam rhoncus magna a purus laoreet, sagittis volutpat felis volutpat. Fusce sagittis aliquet diam, vitae semper velit hendrerit ut. Nullam odio lacus, ultrices ut dui ut, consectetur eleifend quam. Mauris eget bibendum enim, sed fringilla nulla. Phasellus auctor metus quis pulvinar scelerisque. Curabitur at mi at lacus imperdiet eleifend vitae at turpis. Nam bibendum lacinia fermentum. Duis vel nisi risus. Vivamus felis neque, bibendum nec lobortis nec, congue in odio. Vestibulum dignissim vestibulum nisi, in scelerisque nibh feugiat vitae. Suspendisse eleifend rutrum feugiat. Suspendisse eu diam nec mauris aliquet posuere nec et quam.</p>
    <p>Ut placerat tellus at orci egestas, eget viverra lectus tempor. Pellentesque ultrices tellus ut massa dignissim sagittis. Ut vestibulum diam id odio luctus molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse quis felis et tortor mattis tincidunt. Suspendisse potenti. Etiam dictum in sapien id consectetur. Vivamus nec erat facilisis arcu euismod consequat.</p>
    <p>Suspendisse potenti. Aliquam erat volutpat. Integer et sem vitae risus ornare elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec id nisi posuere lacus dignissim placerat. Cras id velit eros. Donec tincidunt nunc ac tempor eleifend. Aliquam ut imperdiet diam, eu imperdiet leo. Maecenas dapibus metus justo, non facilisis tellus ultricies in. Ut nec tempor neque. Nam sit amet quam ut risus blandit malesuada at ut metus. Integer nec massa vel nibh vestibulum molestie.</p>
</article>
<footer></footer>

CSS:

html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
    position: relative;
    padding: 50px 0;
}
header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: red;
}
article {
    padding: 25px;
}
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: red;
}

其中的关键组成部分是:

• 正文有顶部和底部填充以适应页眉和页脚的大小。
• 页眉和页脚绝对定位。
• 内容不是绝对定位。

希望这对您有所帮助。