CSS DIV高度背景图像重叠

我有这两个DIV标签与背景图像。CSS DIV高度背景图像重叠

<div class="content_bg"> 
    <div id="content"> 
     <div id="contentLeft"> 
     </div> 
     <div id="contentRight">    
     </div> 
    </div> 
</div> 
<div class="footer_bg"> 
    <div id="footer"> 
     <div id="footerLeft">    
     </div> 
     <div id="footerRight">   
     </div> 
    </div> 
</div>

如果我手动设置内容的高度，一切看起来正常，但如果我将它设置为100％或自动，对content_bg顶部的footer_bg重叠。有人可以建议吗？

/* 
==================================================================== 
Content Area 
==================================================================== 
*/ 

.content_bg 
{ 
    background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top; 

} 

#content 
{ 
    width:980px; 
    margin:auto; 
    height:auto; 
    background:white;  

} 

#contentLeft 
{ 
    float:left; 
    width:209px; 
    margin-top:50px; 
} 


#contentRight 
{ 
    float:right; 
    width:770px;  
    font-family: Verdana, Arial, Sans-Serif; 
    font-size: 11px; 
    line-height:17px; 
    border-left:1px solid; 
    margin:20px 0 0 0; 
} 

/* 
==================================================================== 
Footer 
==================================================================== 
*/ 

.footer_bg 
{ 
    background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top; 

} 

#footer 
{ 
    width:980px; 
    height:258px; 
    margin:auto; 
    background:#dadad9 url(images/interior_footer.jpg) no-repeat center top; 
} 
#footerLeft 
{ 
    width:400px; 
    height:50px; 
    font-family:Verdana, Arial, sans-serif; 
    font-size:11px;  
    line-height:25px; 
    float:left; 
    padding: 20px 0 0 25px; 
    color:#fff; 
} 


#footerRight 
{ 
    width:100px; 
    height:50px;  
    float:right; 
    padding: 20px 0 0 0; 
}

来源

2013-02-19 user1781367

您可以请创建一个小提琴，以便我们可以轻松地看到问题的确切位置。 – w3uiguru 2013-02-19 18:43:39

请看看我的回答，并告诉我是否在某些地方滞后。我没有信心，因为我没有看到背景图片。如果可能的话，请展示真正的问题。 – w3uiguru 2013-02-19 18:57:23

见捣鼓代码和演示：http://jsfiddle.net/4Ly7E/1/

演示：http://jsfiddle.net/4Ly7E/1/embedded/result

注：由于我没有背景图片，所以我只是假设内容和页脚的边界是边界。

.content_bg 
{ 
    background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top; 
    border:1px solid red; /* for visiblity */ 
    overflow:hidden; 

} 

.footer_bg 
{ 
    background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top; 
    border:1px solid teal; /* for visiblity */ 
    clear:both; 
}

来源

2013-02-19 18:53:42 w3uiguru

谢谢。它固定了页脚，将其从内容bg中推开并放置在正确的区域。有没有办法显示content_bg图像而不是隐藏？ – user1781367 2013-02-19 19:51:25

嘿，快乐，有没有办法将背景颜色应用于内容？一切正常，除了内容背景颜色不显示.. – user1781367 2013-02-19 20:43:00

@nana如果你可以告诉我所需的布局，我可以解决你有关布局，CSS和互动等问题。向我展示屏幕截图，附上你的BG图像，让我可以看到图像的宽度和高度并据此编写代码。你帮我我帮你:-) – w3uiguru 2013-02-20 01:52:58

，你应该为所有的父母身高100％（包括身体和HTML）为您的内容接受。或者只是为内容设置{min-height：Npx}。你的问题是＃内容不知道需要什么高度）

来源

2013-02-19 18:44:25 starowere

嗨帕维尔，我的问题是，内容是从其CMS数据库生成的。而最小高度不会这样做，因为这个页面将在每个高度不同的页面中使用。 – user1781367 2013-02-19 19:00:59

CSS DIV高度背景图像重叠

回答

相关问题