我不确定我做错了什么但是在为#content应用背景颜色时遇到了麻烦。但是如果我将高度值设置为800px就行了。但我希望它是自动或100%,因为这个模板将在整个网站中使用。任何建议将不胜感激。
<div class="content_bg">
<div id="content">
<div id="contentLeft">
</div>
<div id="contentRight">
<div id="ContentPane" runat="server" />
</div>
</div>
</div>
<div class="footer_bg">
<div id="footer">
<div id="footerLeft">
</div>
<div id="footerRight">
</div>
</div>
</div>
/*
====================================================================
Content Area
====================================================================
*/
.content_bg
{
background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top;
overflow:hidden;
}
#content
{
width:980px;
margin:auto;
height:auto;
background:#fff;
}
#contentLeft
{
float:left;
width:209px;
margin-top:50px;
}
#contentRight
{
float:right;
width:770px;
margin:20px 0 0 0;
}
/*
====================================================================
Footer
====================================================================
*/
.footer_bg
{
background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top;
clear:both;
}
#footer
{
width:980px;
height:258px;
margin:auto;
background:#dadad9 url(images/interior_footer.jpg) no-repeat center top;
}
#footerLeft
{
width:400px;
height:50px;
float:left;
padding: 20px 0 0 25px;
}
#footerRight
{
width:100px;
height:50px;
float:right;
padding: 20px 0 0 0;
}
答案 0 :(得分:13)
为#content设置溢出为自动。
#content {
width:980px;
margin:auto;
height:auto;
background:#fff;
overflow:auto;
}
答案 1 :(得分:3)
问题是#content
没有内容。由于您使用height:100%
作为div的高度,它将扩展到其父div的完整高度(即.content_bg
)。但是,.content_bg
也没有内容;因此,它正在扩大到零的100%。
答案 2 :(得分:0)
尝试将该类添加到您的ID <div id="content" class="content_bg">
并删除该类。并给你的班级这些属性
.content_bg
{
background-color: white;
width: 100%;
height: 100%;
}
然后,您的ID“content”中的内容将定义宽度和高度。
答案 3 :(得分:0)
您在将背景应用于#content
时遇到问题,因为您没有清除浮动。添加
<div style="clear:both"></div>
在
<div id="contentLeft">
</div>
<div id="contentRight">
<div id="ContentPane" runat="server" />
</div>