我需要按如下方式生成HTML布局:
我已经使用高度100%的表(最终进行了一些调整),顶部和底部单元具有固定高度。这使得中心区域占据了剩余的空间。该区域包含另一个包含三列的表。每个单元格包含一个div,其高度和宽度设置为100%,溢出设置为auto。看起来应该可以工作,但是多余的内容只会导致主表扩展其高度,以便整个页面变得可滚动。
有没有人知道这在实践中有哪些例子?该解决方案应该是合理地跨浏览器,但不必涵盖每个角落的情况。
谢谢, 菲尔
更新 我想出了一个解决方案并在此处将其作为答案发布。
答案 0 :(得分:3)
注意:我在这里假设HTML5和CSS3,但保留了适用于大多数浏览器的属性。 HTML5可以轻松地与HTML 4.01交换。
要创建所需的布局,我们从一些基本的HTML开始:
<div id="wrapper">
<header> Header </header>
<div id="content">
<section id="left"> Left </section>
<section id="center"> Center </section>
<section id="right"> Right </section>
</div>
<footer> Footer </footer>
</div>
困难在于根据您的需求设计造型。首先设置尽可能高的100%高度,以及合适的溢出值,我们可以获得非常接近您想要的东西:
html, body { height: 100%; margin: 0; padding: 0; }
#wrapper { height: 100%; }
header, footer { height: 50px; }
#content { height: 100%; overflow: hidden; }
section { float: left; overflow: auto; height: 100%; }
#left, #right { width: 100px; }
#center { width: 300px; }
不幸的是,这使得布局正好100px(页脚和页眉的组合高度)太高了。为了解决这个问题,我们必须将#content
的高度减少相同的量,但标准的盒子模型不允许这样做。输入box-sizing
(is supported by all major browsers except IE7),我们可以使用它来更改正在使用的盒子模型。使用border-box
框模型,填充包含在高度中,因此我们可以从#content
“移除”必要的高度:
#content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 50px 0; margin: -50px 0; }
有关详细信息,另请参阅this JSfiddle demo和the full screen result。
答案 1 :(得分:1)
这种布局有几个例子可供选择。其中最好的是马修·莱文的“圣杯”,complete with tutorial。
您会注意到此布局不会将页脚固定在屏幕底部。您可以通过将body
(或无所不包的div)高度设置为100%并使用overflow:hidden
来实现此目的,但这会引入潜在的可用性问题。您可能会发现最好根据需要将页面扩展到正确的高度。
答案 2 :(得分:-1)
我想出了一个解决方案,它并不优雅,但确实有效。我创建了一个设置为100%高度的表。然后我添加了一个在加载时执行并调整大小的函数。这将获得窗口的高度并从中减去页眉和页脚的高度,然后将中心区域中div的高度设置为剩余高度。主要的困难是提出了一个准确的窗口高度,通过各种谷歌搜索,我想出了以下似乎工作正常:
function getWindowHeight() {
var height = 0;
var body = window.document.body;
if (window.innerHeight) {
height = window.innerHeight;
} else if (body.parentElement.clientHeight) {
height = body.parentElement.clientHeight;
} else if (body && body.clientHeight) {
height = body.clientHeight;
}
return height;
}