页脚不同的部分高度

Question

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

如果我这样做：

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

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

Answer 1

这就是你所期望的？

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

Answer 2

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

<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>

Answer 3

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

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

页脚不同的部分高度

footer different section heights

css

position

footer