如何结合固定高度标题与灵活的页面布局 [英] how to combine fixed height header with flexible page layout
问题描述
问题：如何结合固定高度和弹性页面布局？
- bodyDiv be：100％of（window.innerWidth less？px ）。
- a& bheight需要为：（body.div.height less？px ）的50％。
< HTML>
< body>
< div id =headerDivstyle =height：？px> fixed height< / div>
< div id =bodyDivstyle =height：100％> flexible height
< div id =astyle =height：50％& div>
< div id =xstyle =height：？px> fixed height< / div>
< div id =bstyle =height：50％> flexible height< / div>
...
< / div>
< / body>
< HTML>
看起来可怕的
页面加载和调整大小事件，因为它太慢，即使
我已尽我所能优化这个速度。
CSS表达式也不是一个选择，因为对我的
知识，将被限制到IE 5-7无论如何。
所以，花了3天试图通过使用任何
组合的负和正边距，我最后
必须承认失败终于要求公共帮助。
我建议你这样做：
< table style =height：100％; width：100％>
< tr style =vertical-align：top; height：50px; background-color：#faa;>
< td>固定< / 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>固定< / td>< / tr>
< tr style =vertical-align：top; background-color：#afa;>
< td> Flexible< / td>< / tr>
< / table>
这将冒犯布局v语义纯粹派，但它会完成工作，使用div和CSS。
PS这只是一个例子，样式应该在外部样式表中，并通过元素id链接。
Problem: how to combine fixed heights with flexible page layout?
- "bodyDiv" height needs to be : 100% of ( window.innerWidth less ?px ).
- "a" & "b" height need to be : 50% of ( 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>
It's been fully worked out in JavaScript, but it looks terrible on page load and resize events because it's too slow, even though I've given my best to optimize this for speed.
CSS expressions are not an option either, since to my knowledge that would be restricted to IE 5-7 anyway.
So, after spending 3 days trying to fix this by using any combination of negative and positive margins, I finally have to admit defeat by finally asking for public help.
At the risk of loosing my reputation.
I would suggest doing something like this:
<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>
This will offend the layout v semantics purists, but it gets the job done and will save you days of messing around with divs and CSS.
P.S This is just an illustration, the styles should really be in an external style sheet and linked by element id's.
这篇关于如何结合固定高度标题与灵活的页面布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
