如何使表格标签和div标签的高度行为相同？

Question

我正在尝试实现一个具有页眉，中间和页脚区域的典型布局。 我特别要确保页脚永远不会高于可见屏幕的底部。 换种说法：当中间语​​言内容简短时，页脚应恰好在页面底部； 当“中部”内容较高时，“页脚”可以位于折叠以下，并且必须低于“中部”内容的底部。

另一个限制是，我正在使用大量现有的HTML，这些HTML无法批量更改-我只能更改涉及的CSS。 中间区域有时是一个表标签，有时是一个div。 问题就在这里-div和table在这里的行为不同（在最新的Chrome，Safari和FF中）。

我可以使用什么CSS来对表和div都适用（并且可以在相当多的台式机浏览器中使用，可以说过去三年的话）？

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

• 将html和body的大小调整为宽度和高度的100％，无边距
• 页脚高度很难设置为20px，没有边距
• 标题高度很难设置为100px，没有边距
• 中间高度为100％
• 中线的上边距为-20px，下边距为-100px

对<table>具有预期效果：

• html，body和Middle的100％高度使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>

Answer 1

[更新的答案]

我看到这里发生了什么。 您的div具有padding-top:100px ，这使其总高度为100％+ 100px。 您的table具有相同的功能，但是该table做一些奇怪的事情，因此不会引起问题。 例如， table总是以div不会拉伸的方式拉伸以填充空间。 请注意，“ body”一词如何以table为中心，而不是以div为中心。

如果您删除padding-top:100px; 通过div CSS可以解决此问题，但中间区域与标头重叠。 由于您无法编辑HTML，因此可以使用CSS为主要部分的第一个元素提供100px的margin-top 100px ，以便将该缓冲区放回原处，而无需增加div的高度。 这样的事情应该起作用：

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

[老答案]

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

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

...并将其min-height 100％。 这样，当内容量较小时，容器将为100％，但是当内容量大于100％时，容器将扩展。

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

您还可以将其position:relative因为无论如何，都必须绝对定位页脚以使其底部边缘固定：

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

请参阅我的JSFiddle来查看示例-它可以与div和table 。

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