Div高度/溢出问题

我遇到的问题是我的页面顶部有两个div，一个包含重复的蓝色背景，另一个包含背景图像。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; 
}

来源

2012-07-24 user1454988

很抱歉，但我不知道我明白你正在努力去做。你能不能把你有什么和你想要得到的东西相提并论？相关标记和CSS（或简化示例）的代码片段也会非常有用。 – Zhihao 2012-07-24 01:18:50

我想获得top_container和top_header divs，以自动垂直扩展内容。相反，我不得不指定高度 – user1454988 2012-07-24 01:25:42

我认为这个问题是您在 'left_content' 和 'right_content'

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

来源

2012-07-24 01:31:02 WDan

，所以我应该使用左对齐和右对齐？ – user1454988 2012-07-24 01:44:01

我WDan在你所遇到的问题是同意因您的left_content和right_contentdiv元素使用float: left和float: right。

当你在一个元素上使用float时，你基本上将它从正常的文档流中移除。默认情况下，元素将按照您在标记中指定的顺序出现在页面上。使用float（或诸如position: absolute之类的东西）将从该“顺序”或“文档流程”中移除元素，使得当将其他元素放置在其页面上的默认位置时，浮动元素将被忽略。

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

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

来源

2012-07-24 02:18:15 Zhihao

+1也尝试使用谷歌搜索如何“清除浮动”。 – brains911 2012-07-24 05:06:22

Div高度/溢出问题

回答

相关问题