0

我遇到的问题是我的页面顶部有两个 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;
}
4

2 回答 2

1

我同意 WDan 的观点，因为您遇到的问题是由于您使用了andfloat: left元素。float: rightleft_contentright_content div

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

由于这些浮动元素使用的空间被忽略，因此top_header div在确定其自身大小时不会考虑浮动元素的大小。这就是为什么您的 div 不会自动扩展的原因。

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

于 2012-07-24T02:18:15.533 回答
0

我认为问题是你在'left_content'和'right_content'中使用浮动

在包装器 div 中使用“溢出：隐藏”。

于 2012-07-24T01:31:02.850 回答