Question

我希望页面的白色背景覆盖内容，但出于某种原因，它只会在导航菜单/＃main_content_top结束。我怎样才能解决这个问题？
HTML外观/图像： http://img687.imageshack.us/img687/8461/croppercapture12.th.jpg
HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #Text1
        {
            width: 77px;
        }
        #Text2
        {
            width: 78px;
        }
    body {
}
    </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<div id="container">

<div id="header"><h1>  
    <img alt="" src="images/tempBanner.jpg" style="width: 747px; height: 75px" /></h1></div>

<div id="sub_header">Facility Booking Registration</div>

<div id="main_content_top"><a href ="Home.htm">Home</a> | <a href = "BookFacility.htm">Book a Facility</a> | <a href ="FindBooking.htm" >Find/Delete a 
    booking</a></div>

<div id="main_content">

<div class="content">

<p class="title">Public Service Announcements</p>
<h2>Vesak Day</h2>
<p>Vesak Day, a public holiday, will fall on 1/5/2011, please note the school will 
    be closed and no bookings will be allowed on this day.</p>
<h2>Labour Day</h2>
<p>Labour Day, a public holiday, will fall on 1/5/2011, please note the school will 
    be closed and no bookings will be allowed on this day.</p>
</div>

<div class="menu">
<div class="menu_title">Login</div>
<div>Username:
    <input id="Text1" type="text" />
    <br />
    Password:
    <input id="Text2" type="text" />
    <br />
    <br />
    <input id="Button1" type="button" value="Sign In" />
                </div>

</div>

</div>

<div id="clear"></div>

</div>

</body>

CSS样式表：

body {
    background: #CACACA url(images/background.png) repeat-x;
    font-family: "Trebuchet MS", Verdana, serif, Arial
}
#container {
    margin: 0 auto;
    width: 750px
}
#header {
    width: 100%;
    height: 33px;
}
#sub_header {
    text-align: right;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    padding-right: 20px;
    padding-bottom: 20px;
}
#main_content {
    margin: 0 auto;
    width: 100%;
    background: #FFFFFF url('images/background_content.gif');
    background-repeat: repeat-y;
} 
#main_content_top {
    height: 30px;
    background: #FFFFFF url('images/background_top.gif');

} 
#main_content_bottom {
    height: 30px;
    background: #FFFFFF url('images/background_bottom.gif');
}
.content {
    float: left;
    width: 510px;
    text-align: justify;
    padding: 0 30px 0 30px;
    font-size: 14px
}
.menu {
    width: 139px;
    float: right;
    padding: 0 20px 0 20px;
    border-left: #8C8484 1px solid;
    font-size: 12px
}
.menu ul {
    margin: 0;
    padding: 10px 0 10px 15px
}
.menu il {
    list-style-type: disc
}
#header h1 {
    margin-bottom: 0px;
    font-size: 28px;
    font-weight: bold;
    color: #A40008
}
.content h2 {
    margin-top: 0px;
    font-size: 20px;
    font-weight: bold;
    color: #A40008
}
.menu_title {
    font-size: 18px;
    font-weight: bold
}
#clear {
    display: block;
    clear: both;
    width: 100%;
    height:1px;
    overflow:hidden;
}
a {
    color: #A40008;
    font-weight: bold;
    text-decoration: none
}
a:hover {
    color: #A40008;
    font-weight: bold;
    text-decoration: underline
}
.title {
    margin: 20px;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    height: 18px;
}
.highlight 
{
    font-weight:bold
}
.update
{
    font-weight:bold;
    color:Green
}

.confirm
{
    font-weight:bold;
    color:Red
}

table
{
    border-style : dashed
}

Answer 1

尝试将overflow：auto添加到#main_content。

Answer 2

如果我理解正确，你想将身体的背景设置为白色？如果这是您的要求，请在正文CSS中删除或注释掉背景样式。

Answer 3

你必须让它溢出隐藏或浮动左边和宽度..........

背景不会涵盖内容

3 个答案: