页脚不同的部分高度答案

【问题标题】：footer different section heights页脚不同的部分高度
【发布时间】：2018-02-02 09:55:05
【问题描述】：

所以我正在做这个项目，但我被页脚困住了。我遇到了这个问题，页脚的第二部分变大并超出了页脚。另一件事是当我做 float:left;在页脚的第三部分，页脚的背景消失了。所以我的问题是，我如何在页脚中包含所有内容。这是密码笔 - https://codepen.io/anon/pen/gxjbyg。

如果我这样做：

footer {
background: rgba(0,0,0,0.15);
clear: both;
position:absolute;
width:100%;
bottom:0;
}

它有点固定，但我想知道是否有另一种方法，而不是使用绝对定位。

【问题讨论】：

标签： css position footer

【解决方案1】：

这就是你所期望的？

footer {
 background: rgba(0,0,0,0.15);
 clear: both;
 display: table;
 width: 100%;
}

【讨论】：

是的..也许您或其他人可以解释为什么如果没有此修复，页脚不会全高？我也试图让它显示：块；它也很有效。
@BenasLengvinas 页脚没有达到全高，因为您在其中有浮动内容。如果您没有设置display: table 来包装所有内容或为页脚添加clearfix，则它不会考虑浮动元素来设置其高度。

【解决方案2】：

您可以使用 clearfix css 技巧来固定具有浮动子元素的父容器的高度。您想要在您发布在 codepen 上的代码中做的是使 #left、#center 和 #right 元素向左浮动，然后将 clearfix 类应用于作为这三个浮动元素的父级的页脚元素。以下是代码中的示例代码：

<html>
<head>
    <style>
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
        #left, #center, #right{
            float:left;
        }
    </style>
</head>
<body>
<footer class="clearfix">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</footer>

【讨论】：

我看到@nersoh 解决方案的结果与您的相同，您认为哪种解决方案更好？
这基本上是一样的，但我推荐我的解决方案，因为它遵循可重用性和单一职责的干净编码实践。这意味着我们的 .clearfix 类仅在元素具有浮动子元素时负责“修复”布局，并且除了应用于同一元素以实现不同样式的其他 css 类之外，它还可以轻松地重用于需要它的任何其他元素目的。
如果您对 .clearfix 解决方案在过去的发展过程感兴趣，请点击以下链接：css-tricks.com/snippets/css/clear-fix

【解决方案3】：

在我看来，您的问题是您将 #top 和 #bottom 都设置为 50% 的高度，每个都设置了 20px 的额外填充。如果你看你的重叠，它是 40px。

要解决此问题，请将您的高度设置为 45% 并将内边距设置为 5%。这可能会实现您正在寻找的行为。

【讨论】：