如何将固定高度的标题与灵活的页面布局相结合
Posted
技术标签:
【中文标题】如何将固定高度的标题与灵活的页面布局相结合【英文标题】：how to combine fixed height header with flexible page layout 【发布时间】：2010-10-11 11:24:12 【问题描述】：问题：如何将固定高度与灵活的页面布局结合起来？
“bodyDiv”高度需要为：(window.innerWidth less ?px) 的 100%。 “a”和“b”高度需要为 (body.div.height less ?px ) 的 50%。
<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 天时间尝试使用任何 负边距和正边距的组合，我终于 不得不承认失败，最终寻求公众帮助。
【问题讨论】：
【参考方案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 链接。
【讨论】：
+1 尽管它可能会冒犯某些人，但它简短、简单、易读，并且适用于大多数浏览器。 你好 Noel，这正是医生所要求的。我很高兴你冒着名誉的风险，因为它完全符合我的要求。我将发布我的问题的完整解决方案，包括两者一旦我得到我的用户 ID，你和我自己的方法。谢谢！ Jörg Schaper 感谢 Jörg 的反馈。期待您的完整解决方案。 ---- 我一般尽量避免使用表格进行布局，但有时也无法避免。 ---- 哦，还有声望。【参考方案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
有各种“解决方案”，但都不是完美的。如果你想出更好的方法来解决这个问题，请告诉我。
【讨论】：
你好大卫，我刚刚通过使用 Noel Walters 的答案（表格）并将其与我自己的方法（div 和负边距）相结合，将我的问题解决了 99%。请参阅对 Noel 答案的评论。我会尽快阅读您建议的文章，但这需要一些时间。谢谢！约尔格。【参考方案3】：以下正是我想要的，即：
页面的宽度正好是 100%，并且 高度 页眉和页脚的高度是固定的 所有其他元素在 宽度和高度 灵活的尺寸以数量表示 总计 100% 静态尺寸以像素为单位 页面不需要javascript 加载/调整大小 页面不需要css表达式 加载/调整大小 页面上没有丑陋的页面重绘延迟 加载事件 调整大小时没有丑陋的页面重绘延迟 活动 由于 4) 和 5)，拆分器的脚本会很简单<html>
<style type="text/css" media="all">
html,body,table,divheight:100%;width:100%;
html * outline:0;border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;
divfloat: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 的确认信息，所以无法对您的答案进行投票！
我只想像 David 建议的那样通过 div 和 css 完成此操作，但正如我在原始帖子中所述，我只是“不能”。将阅读您建议的链接，并让您了解“完美”解决方案，以防我设法解决。感谢这些链接，戴夫。
新的小问题：拆分器需要 4px 宽/高，而且确实如此。奇怪的是，我不得不将 8px 用于分隔器，而 -4px * 2 用于周围元素的负边距。有什么建议吗？
【讨论】：
【参考方案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 + 表格！对我来说，表格作为布局是最好的，css 用于优化和渲染视觉效果。最后，如果他们的网站是用 css 或桌子或木头和钉子制作的，客户不会关心黄瓜。 :) 告诉我一个很好的理由，为什么我应该使用纯 CSS 方法来获得完全以宽度为中心的 3 列、固定的中间列、完整的浏览器高度，而无需进行 CSS 调整、修复、黑客攻击......每个人都真正进入网站在所有浏览器中，creation 都知道表格呈现比 CSS 更直观且所需的代码更少。
快速测试 :) <div width="100%" height="100%">test</div> 可以单独使用吗？？
【讨论】：
以上是关于如何将固定高度的标题与灵活的页面布局相结合的主要内容，如果未能解决你的问题，请参考以下文章