0

我正在尝试实现具有页眉、中间和页脚区域的典型布局。我特别想确保页脚永远不会高于可见屏幕的底部。换句话说：当 Middle 内容较短时，Footer 应该正好在页面底部；当 Middle 内容较高时，Footer 可以在折叠下方，并且必须在 Middle 内容的底部下方。

一个额外的限制是我正在处理大量现有的 HTML，我无法批量更改——我大多只能更改所涉及的 CSS。中间区域有时是表格标签，有时是 div。这就是问题所在——div 和 table 在这里表现不同（在最新的 Chrome、Safari 和 FF 中）。

我可以使用哪些 CSS 可以同时用于 table 和 div（并且可以在合理的桌面浏览器中使用，让我们说过去 3 年的任何内容）？

对于基于 <table> 的页面，css 设置如下：

  • 将 html 和正文调整为宽度和高度 100%，无边距
  • 页脚高度硬设置为 20 像素，没有边距
  • 标题高度硬设置为 100 像素，没有边距
  • 中间高度为 100%
  • Middle 的上边距为 -20px，下边距为 -100px

这对 <table> 有预期的效果：

  • html、body 和 Middle 的 100% 高度使 Middle 至少与窗口一样高。
  • Middle 上的边距具有将中间区域拉到页眉下方页面顶部的效果，并将页脚向上拉，使其位于中间区域的底部。

但是，对于 < div > 它失败了。“拉”的效果是一样的，而且效果很好。但是div 的高度似乎是 Header 的高度加上窗口的高度。

我尝试过调整不同部件的盒子模型；我试过“显示：表；” 在 div 上。

这是一些演示该问题的 HTML。只需删除“显示：无；” 用于 div.middle 或 table.middle 查看每个的行为。

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            margin: 0;
            height: 100%;
            width: 100%;
        }
        .header { 
            width: 90%;
            height: 100px; 
            background: rgba(0,255,0,.25); 
        }
        table.middle { 
            display: none; 
            box-model: border-box; 
            height: 100%;
            margin-bottom: -20px;
            margin-top: -100px;
            padding-top: 100px;
            width: 100%;
            background: rgba(255,0,0,.25); 
        }
        div.middle { 
            display: none;
            box-model: border-box; 
            height: 100%;
            margin-bottom: -20px;
            margin-top: -100px;
            padding-top: 100px;
            width: 100%;
            background: rgba(255,0,0,.25); 
        }
        .footer {
            width: 90%;
            height: 20px;
            background: rgba(0,0,255,.25); 
        }
    </style>
</head>
<body>
    <div class="header">
        header
    </div>
    <table class="middle"><tr><td>
        body
    </td></tr></table>
    <div class="middle">
        body
    </div>
    <div class="footer">
        footer
    </div>
</body>
</html>
4

1 回答 1

1

[更新答案]

我看到这里发生了什么。您div拥有padding-top:100px的总高度为 100% + 100px。你table有同样的事情，但是table做奇怪的事情，所以它不会引起问题。例如，总是以一种不会table的方式伸展以填充空间。div注意“body”这个词是如何以 your 为中心的，table而不是以 your为中心的div。

如果您padding-top:100px;从divCSS 中删除 ，它可以解决问题，除了您的中间区域与标题重叠。由于您无法编辑 HTML，因此您可以使用 CSS 提供主要部分 amargin-top中的任何第一个元素100px，以将该缓冲区放回原处而不增加div. 像这样的东西应该工作：

div.middle:first-child{
   margin:top: 100px;
}

[旧答案]

这是我的解决方案的 JSFiddle。基本上，将整个东西包裹在一个容器中div，

<div class="container">
   [all your HTML]
</div>

...并给它min-height100％。这样容器在内容较小时将是 100%，但在内容大于 100% 时会扩大。

.container { 
    min-height: 100%;
    position: relative;
}

您还可以这样做，position:relative因为无论如何您都必须绝对定位页脚以使其粘在它的底部边缘：

.footer {
    position: absolute;
    bottom: 0px;
}

请参阅我的JSFiddle以查看示例——它适用于您的div和您的table.

PS：你有它们的高度，但更好的大/小内容模拟是使用像素，比如在和100%之间切换。另外，我从它们中删除了您的内容，因为不再需要它们，因为将页脚设为绝对会将其从文档流中删除。60px600pxmargin-bottom:-20px

于 2013-06-28T18:17:22.743 回答