min-height 100%不会扩展WebKit浏览器中的整个页面

时间:2011-02-25 19:42:22

标签: css

我有以下CSS:

#middle {
  float: right;
  width: 590px;
  height: auto !important;
  min-height: 100%;
  height: 100%;
}

我的目标是让#middle div一直延伸到底部。此代码在FF中完美运行,但在WebKit浏览器中不起作用。 我已经发现这是由于float:right属性,没有浮动,这个问题不会持续

在WebKit浏览器中,看起来正在推导出min-height并在#middle div上永久设置。这可以通过加载具有缩小窗口的页面然后将窗口扩展到更大的尺寸来查看。

以下是该问题的演示网站:http://staging.similarblue.com/about/beliefs/

我意识到我可以使用一些JS来处理这个问题(在窗口调整大小时),但我想知道是否有纯CSS替代方案。

以下是该问题的屏幕截图:http://i56.tinypic.com/s49e37.jpg

谢谢!

2 个答案:

答案 0 :(得分:1)

你的style.css文件中有两行,有一个height:auto!important声明,它覆盖你的身高:100%声明。没有那条线,你的网站看起来很好!

您可能正在寻找的是this。它在过去很适合我,希望它可以帮助你!

答案 1 :(得分:0)

你可以做的是制作背景div:

position: fixed;
top: 0;
bottom: 0;

然后将内容放在固定背景的顶部的单独div 中。这是一个例子:Demo

编辑:适应滚动。