CSS 100%高度 + 具有固定高度的标题栏

Question

我正在构建一个布局，其中包括一个高度为40像素的标题。在这个标题下面，有一个SWF占据了其余可用的空间。

到目前为止，最好的解决方案是使用表格，在第一行中给出40px的高度，并在第二行中给出100％的高度 - 但这些行仍然会在Internet Explorer中相加，导致出现一个滚动条，多出40个像素的高度 - 这不应该是这种情况。

我尝试使用这个：http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ - 如果您有最终推下的内容，它可以正常工作，但如果有一个100％的SWF，它将占据整个页面或半个页面（取决于将SWF放在内容div中还是SWF成为内容div）。

在我采取JavaScript来处理这个问题之前，我想知道是否有其他人知道更好的解决方案？

- Kasper

Answer 1

尝试将您的页眉设置为静态。这样它就会浮动在主体上方，并将主体设置为100%高度。然后在顶部给主体添加40像素的填充。

- Nick Berardi

---

这种方法有点奏效，我不得不在我的swfobject中添加wmode="transparent"以保持显示标题，但现在如果标题和SWF位置都设置为absolute，我的SWF仍然会一直停留在页面顶部。当设置为relative时，同样的问题仍然存在。 - Kasper

这在普通页面上本来可以运行，但是由于SWF的设置，我不得不使用JavaScript。无论如何还是谢谢。 - Kasper

Answer 2

一个类似的解决方案，可以将页脚强制固定在页面底部。

    html, body{height:100%;margin:0;padding:0;}
    #head{height:40px;background:blue;}
    #wrapper{min-height: 100%;height: auto !important;height: 100%; margin: 0 auto -40px;background:red;}
    #content{}

<div id="wrapper">
<div id="head">
</div>
<div id="content">
</div>
</div>

- wheresrhys