2

您好，我正在创建简单的布局，但是当我想设置页脚样式时，它不会在输出中显示，？可能是什么问题呢 ？看到我在页脚上应用了样式，它的背景颜色没有显示。图片在这里： http: //oi40.tinypic.com/xe03rs.jpg

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #container {
        width: 950px;
        height: auto;
        margin:auto;
    }
    #header {
        width: 950px;
        height:120px;
    background-color:#F00;
}
#main {
    width: 750px;
    height: 500px;
    background-color:#0F0;
    float:left;
}
#sidebar {
    width:200px;
    height:500px;
    background-color:#00F;
    float:left;
}
#footer {
    width: 950px;
    height: 500px;
    background-color:#F00;
    }
</style>
</head>

<body>
<div id="container">
    <div id="header">
    HEADER GOES HERE
    </div>

    <div id="main">
    MAIN CONTENT GOES HERE
    </div>

    <div id="sidebar">
    SIDEBAR GOES HERE
    </div>
    <div id="footer">
    FOOTER GOES HERE
    </div>
</div>

</body>
</html>
4

3 回答 3

2

样式有效，但您的页脚被其他元素隐藏，请尝试：

#footer {
width: 950px;
height: 500px;
background-color:#F00;
float: left;
}

这是小提琴：http: //jsfiddle.net/6tMFm/40/

于 2013-07-10T09:37:53.670 回答
1

你有两个divs main，sidebar哪个正在floating使用float:left;

所以为了使footer可见，你需要clear:both为页脚添加属性，因为div是块级元素，当你添加float它们时，它们的行为就像正常一样inline DOM，

#footer {
    width: 950px;
    height: 500px;
    background-color:#F00;
    clear:both;
  --^^^^^^^^^^^-----
}

现在看到变化。它必须工作。

于 2013-07-10T09:41:21.703 回答
0

为#container 设置

overflow: auto;

对于#footer

margin: auto;
于 2013-07-10T09:35:47.437 回答