Question

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

“bodyDiv”高度必须为：100％（window.innerWidth less？px ）。

“a”＆amp; “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>

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

CSS表达式也不是一个选项，因为我的无论如何，这些知识仅限于IE 5-7。

所以，花了3天试图通过使用任何方法解决这个问题我终于将负利润和正利润相结合不得不最终要求公众帮助，以承认失败。

Answer 1

冒着失去声誉的风险。

我建议做这样的事情：

<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>

这将冒犯布局v语义纯粹主义者，但它可以完成工作，并且可以节省你使用div和CSS的日子。

P.S这只是一个例子，样式应该在外部样式表中，并按元素ID链接。

Answer 2

我担心纯CSS / HTML无法做到这一点。如果我错了，我会是最开心的。关于SO有几个相关的问题（没有全部阅读，其中一些可能会触及略有不同的问题）：

Make a div fill the height of the remaining screen space
How do I force a DIV block to extend to the bottom of a page even if it has no content?
How to create div to fill all space between header and footer div
How can I scale a div to 100% height and width inside of another element

有各种“解决方案”，但它们都不是完美的。如果你想出一个更好的方法来解决这个问题，请告诉我。

Answer 3

以下内容完全符合我的要求，即：

页面的宽度正好是100％高度
页眉和页脚高度固定
所有其他元素都很灵活宽度和高度
灵活尺寸以金额表示总计100％
静态大小以像素表示
页面不需要javascript 负载/调整大小
页面不需要css表达式负载/调整大小
页面上没有难看的页面重绘延迟加载事件
没有丑陋的页面重新调整延迟调整大小事件
分割器的脚本很简单

<html>
  <style type="text/css" media="all">
    html,body,table,div{height:100%;width:100%;}
    html * {outline:0;border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;}
    div{float:left}
  </style>
  <body>
    <table>
      <tr style="height:100px;background-color:red;"><td>Fixed</td></tr>
      <tr style="height:100%;"><td>
        <div style="width:25%;margin-right:-4px;background-color:green;">Flexible</div>
        <div style="width:8px;background-color:silver;cursor: e-resize;"></div>       
        <div style="width:50%;margin-right:-4px;margin-left:-4px;background-color:blue;">Flexible</div>
        <div style="width:8px;background-color:silver;cursor: e-resize;"></div>     
        <div style="width:25%;margin-left:-4px;">
          <div style="height:33.33%;margin-bottom:-4px;margin-top:-0px;background-color:green;">Flexible</div>
          <div style="height:8px;background-color:silver;cursor: n-resize;"></div>          
          <div style="height:33.33%;margin-bottom:-4px;margin-top:-4px;background-color:blue;">Flexible</div>
          <div style="height:8px;background-color:silver;cursor: n-resize;"></div>          
          <div style="height:33.33%;margin-bottom:-0px;margin-top:-4px;background-color:yellow;">Flexible</div>
        </div>
      </td></tr>
      <tr style="height:20px;background-color:red;"><td>Fixed</td></tr>
    </table>
  </body>
</html>

这种解决方案是通过Noel Walters（表格方法）和我自己（具有负边距的div）的帮助实现的。谢谢诺埃尔。但是，由于我还没有收到我的用户ID的确认信息，因此无法对您的答案进行投票！

我喜欢通过div和css这样做，就像大卫建议的那样，但正如我原来的帖子所述，我只是“不能”。将阅读您建议的链接，并让我知道“完美”的解决方案，以防我设法解决。感谢这些链接，戴夫。

新的小问题：分割器需要 4px 宽/高，它们是。奇怪的是，我不得不使用 8px 作为分离器，而 -4px * 2 则用于周围元素的负边缘。有什么建议吗？

Answer 4

这是关于表格与css布局相同的永无止境的故事。 CSS纯粹主义者甚至会说CSS布局下载速度更快？浏览器渲染速度更快？少码???在现实生活中，并且在适当的CSS表格中具有“视觉”样式，表格布局比使用CSS执行相同的字符要少得多。不相信吗？只需尝试使用CSS和表格进行完整的浏览器高度，固定宽度，水平居中，标题/ 2列内容/页脚简单布局...获取代码，粘贴Word并执行单词计数。 CSS代码不比表代码大x2倍！告诉我，在屏幕布局中间复制100％宽度100％高度文本需要做多少CSS内容，简单如下：

<table width=100% height=100%><tr><td align="center" valign="middle">Some text</td></tr></table>

或

* {
margin:0px;
padding:0px;    
}

html, body {
height:100%;
min-height: 99%;
}

.test {
border: 1px solid #cccccc;
height:100%;
position:relative;
}

.test2{
display:inline;
height:24px;
width:24px;
left:50%;
top:50%;
}
<div class="test"><div class="test2">test</div></div>

所以CSS更适合布局，因为什么？更容易维护？告诉我，当完全完成并正常工作时，有多少人会调整页面的布局？除非没有妻子/丈夫到达：D少代码？是的，“更多”是“少”正确，就像1是0？更好的设计/代码分离？当然，您的设计不需要那些DIV或SPAN或P或任何您想要的标签。

我一直认为：使用混合代码可以在更短的时间内做任何你想做的事情来呈现你想要的方式，无论是css还是表格还是css + table！对我来说，表格和布局是最好的，css用于优化和渲染视觉效果。最后，如果他们的网站是用css或桌子或用木头和钉子制作的，客户不会关心黄瓜。 :)告诉我一个很好的理由为什么我应该使用纯CSS方法来获得完全以宽度为中心的3列，固定的中间列，完整的浏览器高度没有CSS调整，修复，黑客...每个人真正进入网站创建知道表格渲染在所有浏览器中比CSS更具视觉一致性和更少的代码。

快速测试:) <div width="100%" height="100%">test</div>这个单独工作吗？

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

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

4 个答案: