Question

我真的尝试使用div，我似乎无法获得与以下简单表格布局相同的内容：

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

我想要保留的重要元素：

任何真实内容都是固定宽度。（在这种情况下，750px）
页眉和页脚背景扩展到页面宽度的100％。
主要内容背景不会水平扩展，但会垂直扩展以填充页眉和页脚之间的区域。
即使主要内容不是很高，页脚也始终位于页面底部。

我尝试过多种策略，并发现至少有两种不同的方法可以使用div将页脚保持在页面底部。不幸的是，如果主要内容位于div中，那么似乎没有任何方法可以使其垂直扩展以填充短页面上页眉和页脚之间的空间。

编辑：更改了示例以显示即使不在怪癖模式下也能正常工作。以上验证。

编辑2：

我已经找到了一种方法来使用javascript进行大部分操作。所以，我想我的问题是：如何在没有javascript的情况下执行此操作。这是我正在使用的（我肯定只能在firefox中使用，但我可以解决这个问题）：

<script type="text/javascript">
function changeDiv() {
    document.getElementById("content").style.minHeight = document.body.clientHeight - 200 + "px";
}
changeDiv();
window.onresize = changeDiv;
</script>

“content”将指定我想要展开的主要内容div。

Answer 1

你真正的问题似乎是“我如何让我的主要内容扩展，我的页脚可以到达页面底部。”

答案是：你不能用表来做，至少在你使用指定HTML 4.0过渡版或更高版本的doctype时也是如此。是的，它没有doctype，但那是因为浏览器在这种情况下进入“怪癖模式”。

我相信你可以通过绝对定位来做到这一点，你可能已经看过了一些例子。就个人而言，我更多的是看一种使用固定定位为页脚的方法，使用更大的z顺序使其呈现在内容之上，然后使用渐变效果使主要内容消失在其后面。这是一个例子（由比我好得多的人创建）：http://www.designbyfire.com/

Answer 2

这是我的尝试。在FF3和IE8上似乎没问题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body { padding: 0; margin: 0; }
div { padding: 1px; }
#wrapper, #wrapper-top, #wrapper-bottom { position: absolute; left: 0; right: 0; width: 100%; }
#wrapper-top { background-color: #666; height: 100px; top: 0; }
#wrapper-bottom { background-color: #666; height: 100px; bottom: 0; }
#wrapper { top: 100px; bottom: 100px; background-color: #DDD; }
#header, #content, #footer { width: 750px; margin: 0 auto; height: 100%; min-height: 100%; }
#content { background-color: white; }
</style>
</head>
<body>
<div id="wrapper-top">
  <div id="header"><h1>Header Content</h1></div>
</div>
<div id="wrapper">
  <div id="content"><h1>Main Content</h1></div>
</div>
<div id="wrapper-bottom">
  <div id="footer"><h1>Footer Content</h1></div>
</div>
</body>
</html>

注意： DOCTYPE很重要，并强制在IE中使用兼容模式。

Answer 3

要使页脚粘贴到页面底部，取决于内容是否大于视口高度，或者内容是否未达到底部（但您仍希望页脚显示在底部），请尝试实施FooterStick。

Answer 4

这可以在非IE浏览器中完成。但是在IE上（至少是IE7-），你需要使用表格，最好是conditional comments。

我没有花时间去测试，但试试这个，看它是否有效：

在html上，使用严格的doctype。最好像这样的xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

并把它放在身体里：

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

关于css：

div.header,
div.content,
div.footer {
    position: absolute;
}

div.header {
    top: 0;
    height: 20px;
}

div.footer {
    bottom: 0;
    height: 20px;
}

div.content {
    top: 0;
    bottom: 0;
    /*can't remember if it was margin or padding, if one doesn't works, try the other*/
    margin-top: 20px;
    margin-bottom: 20px;
}

Answer 5

而不是position:absolute使用position:fixed作为div（页眉/页脚）。

div.header, div.footer {
    position: fixed; } 
div.header{
    top: 0; }
div.footer {
        bottom: 0; }

相应align content div padding取决于header/footer height。因此，只要您scroll，您的网页footer将仅位于底部，而header将位于最前方。并为z-index:yourvalue;提供header/footer。

我如何将此表格布局转换为divs / css？

5 个答案: