我正在尝试设计一个包含溢出内容区域的网站:auto和动态高度。最好是,我希望能够在溢出下面放置一个顶部和一个页脚的头部:自动div,并让该div占用剩余的空间,但到目前为止,这已经证明是困难的。高度:自动无效,溢出:自动需要高度,所以我不能不设置它。有任何想法吗?我的代码可以在这里找到:http://abbottconstruct.com/wp-content/themes/abbott/index.html
感谢任何帮助过的人。
答案 0 :(得分:1)
您是否尝试过基于百分比的高度甚至是“position:fixed
”页脚?看看这个:
答案 1 :(得分:0)
为了使CSS百分比高度起作用,元素的父级必须定义高度。因此,我们可以使用以下标记来完成:
<body>
<div id="content">
<div id="header">Header</div>
<div id="text">
Text content of your page
</div>
</div>
<div id="footer">Footer</div>
</body>
除页脚之外的所有网站内容都包含在#content
元素中。然后使用min-height: 100%
声明始终至少为其父级高度的100%。由于它的父体是主体并且具有高度声明,因此按预期工作。
最后,页脚以负边距进入视图,并且填充底部添加到#text
元素,因此其内容不会意外重叠。
CSS如下:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#content {
min-height: 100%;
/* IE6 will need height: 100% defined in an IE6 only stylesheet */
}
#header, #footer {
height: 100px;
}
/* Bring the footer into view */
#footer {
margin-top: -100px; /* footer's height */
}
/* Make sure footer doesn't overlap #text element */
#text {
padding-bottom: 100px; /* footer's height */
}
你可以看到它in action here。如果添加更多填充文本,您将看到页脚被正确按下。
答案 2 :(得分:0)
对于像这样的液体布局,我倾向于设置一个非常基本的表(不像有些人想的那样邪恶),因为他们进行这些自动计算,你需要计算浏览器的高度/宽度并减去某个值。你。
测试一下,看看你怎么走。
http://lm-86.com/html_tests/liquid_header.html
干杯
林登