Question

您好我正在制作一个网站http://guesthousecontrasts.com但是由于某种原因，内容div不会填满整个页面我相信这是因为我使用的一些花车，我的另一个问题是内容一些页面不会“推”粘性页脚而不是它保持在它上面，我尝试添加清除修复到一些div并在页面的末尾添加一个clear-fix div但是似乎没有任何工作所以我是有点失落。我非常感谢你们给予的所有帮助，并希望听到你们可能有的任何提示/评论/评论。

Answer 1

.main div的宽度为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%它将需要整个容器的大小。

麻烦在网站上的CSS浮动

3 个答案: