如何将固定高度标题与灵活的页面布局相结合

Question

如何将固定高度标题与灵活的页面布局相结合

问题:如何将固定高度与灵活的页面布局相结合？

"bodyDiv"高度必须是:100%(window.innerWidth less？px).

"a"和"b"的高度必须是:50%(body.div.height less？px).

<HTML>
    <body>
        <div id="headerDiv" style="height:?px">fixed height</div>
        <div id="bodyDiv" style="height:100%">flexible height
            <div id="a" style="height:50%">flexible height</div>
            <div id="x" style="height:?px">fixed height</div>
            <div id="b" style="height:50%">flexible height</div>
            ...
        </div>
    </body>
<HTML>

Run Code Online (Sandbox Code Playgroud)

它已经在JavaScript中完全解决了,但它在页面加载和调整大小事件上看起来很糟糕,因为它太慢了,即使我已经尽力优化它以提高速度.

CSS表达式也不是一个选项,因为据我所知,无论如何都将限制在IE 5-7.

因此,在花了3天试图通过使用负利润和正利润的任意组合来解决这个问题之后,我终于不得不承认最终要求公众帮助的失败.

Answer 1

Noe*_*ers 6

冒着失去声誉的风险.

我建议做这样的事情:

<table style="height:100%;width:100%">
  <tr style="vertical-align:top;height:50px;background-color:#faa;">
    <td>Fixed</td></tr>
  <tr style="vertical-align:top;background-color:#afa;">
    <td>Flexible</td></tr>
  <tr style="vertical-align:top;height:100px;background-color:#faa;">
    <td>Fixed</td></tr>
  <tr style="vertical-align:top;background-color:#afa;">
    <td>Flexible</td></tr>
</table>

Run Code Online (Sandbox Code Playgroud)

这将冒犯布局v语义纯粹主义者,但它完成了工作,并将节省你几天乱搞div和CSS.

PS这只是一个例子,样式应该在外部样式表中,并通过元素id链接.

归档时间：	17 年前
查看次数：	7526 次
最近记录：	14 年，3 月前