html - 现场css浮动问题

Question

您好，我正在创建一个网站http://guesthousecontrasts.com但是由于某种原因，内容 div 不会填满整个页面我相信这是因为我使用了一些浮动，我遇到的另一个问题是某些内容页面不会“推动”粘性页脚而是停留在其上方，我尝试向某些 div 添加清除修复并在页面末尾添加一个清除修复 div 但是似乎没有任何效果所以我很友善的丢失。我真的很感谢你们可以提供的所有帮助，并且很想听听你们可能有的任何提示/建议/批评。

Answer 1

div的宽度.main为1000px；你可以随心所欲地保留它或 100% 保留它。但是横幅图像不适合这种情况。利用

#banner {
background: url(../images/bg_img2.jpg) 0 0 no-repeat;
padding: 30px 0 0 60px;
background-size: cover;
}

根据宽度调整图像。

从 .main-content 中删除 margin-bottom

.main-content {
min-height: calc(100% - 107px); //100% minus 107px of footer
height:auto !important;
margin:0 auto;
}

这将解决您的页脚重叠问题。

Answer 2

这里只有一个提示，停止使用浮动 :P 如果使用不当，它真的会破坏整个网站，或者会给你现在遇到的问题。我建议给父 div（内容）：

位置：相对

那个div的孩子：

位置：绝对

Answer 3

尝试添加

<div class="body2">
</div>

以下

<div class="main">
    <section id="content"></content>
</div>

这应该可以解决您的页脚重叠问题。

要解决内容宽度问题，您可以尝试以下更改，

<div class="main">
</div>

有以下CSS

.main {
    margin: 0 auto;
    width: 1000px;
}

如果你给width : 100%它，它将占用整个容器的大小。