我如何将此表布局转换为divs / css？ [英] How would I convert this table layout to divs/css?
问题描述
我真的想使用div，我似乎不能得到相当于以下简单的表布局：
I'm really trying to work with div's and I can't seem to get the equivalent to the following simple table layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body {height: 100%}
.content {width: 750px; vertical-align: top}
</style>
</head>
<body style="margin: 0; padding: 0">
<table style="height: 100%; width: 100%; border-collapse: collapse">
<tr style="background-color: #666666">
<td></td>
<td class="content" style="height: 100px"><h1>Header Content</h1></td>
<td></td>
</tr>
<tr style="background-color: #BBBBBB">
<td></td>
<td class="content" style="background-color: #FFFFFF"><h1>Main Content</h1></td>
<td></td>
</tr>
<tr style="background-color: #666666">
<td></td>
<td class="content" style="height: 100px"><h1>Footer Content</h1>
</td>
<td></td>
</tr>
</table>
</body>
</html>
我想保留的重要元素：
-
任何实际内容都是固定宽度。 （在这种情况下为750像素）
Any real content is fixed width. (in this case, 750px)
页眉和页脚背景展开为页面宽度的100％。
The header and footer backgrounds expand to 100% of the page width.
主要内容背景不会水平展开，但会垂直展开以填充页眉和页脚之间的区域。
The main content background does not expand horizontally, but does expand vertically to fill the area between header and footer.
我试过了一个数字的策略，并发现至少有两种不同的方式使页脚在页面的底部使用div。不幸的是，如果主要内容是在一个div，似乎没有任何方法使它垂直扩展填充页眉和页脚之间的空间在短页上。
I've tried a number of strategies and found at least 2 different ways to keep the footer at the bottom of the page using divs. Unfortunately, if the main content is in a div, there's doesn't seem to be any way to make it expand vertically to fill the space between the header and footer on short pages.
编辑：更改示例以显示即使不是在怪异模式下也可以工作。以上验证。
Changed the example to show that it works even when not in quirks mode. The above validates.
编辑2：
我找到了一个办法与javascript。所以，我想我的问题是：我怎么做没有javascript的。这里是我正在使用的（我相信只有在firefox工作，但我可以解决这个问题）：
I've found a way to do this for the most part with javascript. So, I guess my question is: how do I do this without javascript. Here's what I'm using (which I'm sure only works in firefox, but I could fix that up):
<script type="text/javascript">
function changeDiv() {
document.getElementById("content").style.minHeight = document.body.clientHeight - 200 + "px";
}
changeDiv();
window.onresize = changeDiv;
</script>
content会指定我要扩展的主要内容div。
"content" would specify the main content div I want to expand.
推荐答案
而不是 position：absolute 使用 position：fixed for div（header / footer）。
Instead of position:absolute use position:fixed for div(header/footer).
div.header, div.footer {
position: fixed; }
div.header{
top: 0; }
div.footer {
bottom: 0; }
因此 align $ c> content div padding 依赖于页眉/页脚高度。因此，每当您滚动您的页面 footer 将只在底部和 c $ c>将在顶部。并且还为 header / footer 提供 z-index：yourvalue; 。
And accordingly align your content div padding depend on header/footer height. So whenever you will scroll your page footer will be at bottom only and header will be on top. And also provide z-index:yourvalue; for header/footer.
这篇关于我如何将此表布局转换为divs / css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
