我已经尝试了很长时间了,到目前为止我读过和google的所有帖子都没有帮助我,所以我希望你们其中一个人能给我一个提示: 我有一个由页眉,页脚和内容组成的布局.这个布局在整个页面上高高耸立(这已经
... . . 我已经尝试了很长时间了,到目前为止我读过和google的所有帖子都没有帮助我,所以我希望你们其中一个人能给我一个提示:
我有一个由页眉,页脚和内容组成的布局.这个布局在整个页面上高高耸立(这已经花了我一段时间才弄明白).到现在为止还挺好.但是现在我想尽可能地将内容div尽可能地延伸到页脚的开头.无论我做什么,它都不起作用,它或者保持文本的长度,或者它变成整个窗口的大小,隐藏页脚并生成滚动条.
我读到了一个解决方案,使其定位:绝对,但我不希望这样.
这是一个例子:http://jsfiddle.net/N9Gjf/1/
你真的会帮助我!
这是css:
html,body { height:100%; text-align:center;}#wrapper { min-height:100%; height:100% overflow: hidden; width:800px; margin: 0 auto; text-align: left; background-color:lightblue;} #footer { background-color: silver; height:1.5em; width:800px; margin: -1.5em auto;}#header { background-color: orange; height:100px;}#content { background-color: limegreen;}* { margin:0; padding:0;}
这是html:
<div id="wrapper"> <div id="header"> <p>Header</p> </div> <div id="content"> INHALT </div></div><div id="footer"> <p>Footer</p></div>.
解决方法
. http://jsfiddle.net/calder12/CprV7/
包装器中的高度后缺少一个分号.您还希望将内容的高度和最小高度设置为100%.
#wrapper {min-height:100%;height:100%;overflow: hidden;width:800px;margin: 0 auto;text-align: left;background-color:lightblue;}#content {background-color: limegreen;height:100%;min-height:100%;}. . .. ...