Question

我遇到的问题是我的页面顶部有两个div，一个包含重复的蓝色背景，另一个包含背景图像。

我必须设置两个div的高度才能使它们垂直扩展，不要随内容扩展。我在右侧的那个表格设置为溢出。我认为这是造成问题的原因。

我尝试在代码中没有高度css，但它仍然不会垂直扩展。

为了让背景显得平坦，我必须手动设置高度。

这是页面：http://www.repipespecialists.com/landing/google/repiping.html

这是CSS代码：

#top_container {
    width:100%;
    height:1040px;
    background-image:url(../images/top_bg_repeat.jpg);
    background-repeat:repeat-x;
    background-color:#83b4e9;
}

#top_header {
    width:1200px;
    height:1040px;
    background-image:url(../images/header_bg.jpg);
    background-repeat:no-repeat;
    background-color:#83b4e9;
    margin: 0 auto;
}

Answer 1

我同意WDan，因为您在float: left和float: right left_content元素上使用了right_content和div，因此您遇到了问题

在元素上使用float时，基本上将其从文档的正常流程中删除。默认情况下，元素将以您在标记中指定的顺序显示在页面上。使用float（或类似position: absolute之类的东西）将从“order”或“document flow”中删除元素，这样当将其他元素放在其默认位置时，将忽略浮动元素页。

由于忽略了这些浮动元素使用的空间，因此top_header div在确定自己的大小时不会考虑浮动元素的大小。这就是你的div不会自动扩展的原因。

float的另一种替代方法是使用display: inline-block。您可以阅读以下链接以了解有关差异的更多信息：

Answer 2

我认为问题是你在'left_content'和'right_content'

中使用float

在包装器div中使用“overflow：hidden”。

Div高度/溢出问题

2 个答案: