0

我真的在尝试使用 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>

我要保留的重要元素：

  1. 任何真实的内容都是固定宽度的。（在这种情况下，750 像素）

  2. 页眉和页脚背景扩展为页面宽度的 100%。

  3. 主要内容背景不会水平扩展，但会垂直扩展以填充页眉和页脚之间的区域。

  4. 即使主要内容不是很高，页脚也始终位于页面底部。

我尝试了多种策略，发现至少有两种不同的方法可以使用 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>

“内容”将指定我要扩展的主要内容 div。

4

5 回答 5

0

这是我的尝试。在 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 中使用兼容模式。

于 2009-03-29T12:40:54.333 回答
0

为了让页脚粘在页面底部，取决于内容是否大于视口高度，或者内容是否没有完全到达底部（但您仍然希望页脚出现在底部）尝试实现FooterStick。

于 2009-03-29T12:51:02.593 回答
0

这可以在非 IE 浏览器中完成。但在 IE（至少 IE7-）上，您需要使用表格，最好使用条件注释。

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

在 html 上，使用严格的文档类型。最好像这样的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;
}
于 2009-04-10T16:33:15.207 回答
0

你真正的问题似乎是“我如何让我的主 div 展开，我的页脚到页面底部。”

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

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

于 2009-03-29T12:14:06.347 回答
0

而不是position:absolute用于position:fixeddiv（页眉/页脚）。

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.

于 2015-01-13T06:01:36.030 回答