Question

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

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

我可以使用哪种CSS适用于table和div（在合理的桌面浏览器中工作，可以说过去3年的任何内容）？

对于＆lt;表＆gt;基于页面，css设置如下：

尺寸html＆amp;身体到宽度＆amp;身高100％，没有边距
页脚高度难以设置为20px，无边距
标题高度难以设置为100px，无边距
中间高度为100％
中间的上边距为-20px，下边距为-100px

对＆lt;表＆gt;：

html，body和Middle的100％高度使得Middle至少和窗口一样高。
中间边距可以将中间区域拉到页面顶部下方标题，然后将页脚向上拉，使其位于中间底部。< / LI>

然而，对于＆lt; div>它失败。 “拉动”效果是一样的，效果很好。但是 div的高度似乎是Header的高度加上窗口的高度。

我试过调整不同部分的盒子模型;我试过“display：table;”在div。

以下是一些演示此问题的HTML。只需删除“display：none;”对于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不会填充空间。请注意“正文”一词是如何与您的table对齐，而不是与div对齐。

如果您从padding-top:100px; CSS中删除了div，则会修复此问题，除非您的中间区域与标题重叠。由于您无法编辑HTML，因此您可以使用CSS为margin-top 100px的主要部分中的第一个元素提供任何内容，以将该缓冲区放回其中而不会增加其高度。 div。这样的事情应该有效：

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

[OLD ANSWER]

Here's a JSFiddle with my solution。基本上，将整个事物包装在容器div，

中

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

...并给它一个100％的min-height。这样，当内容较小时，容器将为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，因为他们不再需要了，因为页脚绝对会将其从文档流中删除。

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

1 个答案: