Question

所以我正在做这个项目，而且我坚持使用页脚。我有这个问题，页脚的第二部分变大，并从页脚出来。另一件事是当我浮动时：左;在页脚的第三部分，页脚的背景消失了。所以我的问题是，如何在页脚中包含所有内容。这是代码笔 - 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技巧来修复具有浮动子元素的父容器的高度。您在代码中发布的代码中要执行的操作是使#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>

Answer 3

在我看来，您的问题是Hello method says: Hello World Test method says: TR-1和#top都设置为50％的高度，每次填充额外填充20px。如果你看看你的重叠，那就是40px。

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

页脚不同的部分高度

3 个答案: