如何在Web浏览器中拉伸标题背景颜色?

时间:2012-03-11 13:05:36

标签: html css

我很难在浏览器中创建背景颜色

这是一些代码

body {
    font-size: 1.1em;
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
    margin: 0px auto;
    padding-bottom: 25px;
    width: 980px;
}


div#black_bar{
    background-color: #000000;
}
div#header {
    height: 66px;
    font-family: arial;
    margin: 0 auto;
    color: #FFFFFF;
    margin-top: 5px;
}

当然你可以看到我已经指定了身体宽度为980px,这当然适用于标题,任何想法如何解决这个问题

这个黑条实际上是一个包含标题的div

提前致谢。

1 个答案:

答案 0 :(得分:2)

您需要将标题包装在宽度为100%的正文中,并在标题和内容中指定width = 980px,如下所示:

<强> CSS

body, html{
    width:100%;
}

div#black_bar{
    background-color: #000000;
    width:100%;
}
div#header {
    height: 66px;
    font-family: arial;
    color: #FFFFFF;
    margin-top: 5px;
    width:980px;
    margin:0 auto;
}

#content{
    font-size: 1.1em;
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;  
    padding-bottom: 25px;
    margin: 0 auto;
    width: 980px;
}

<强> HTML

<body>

<div id="black_bar">
    <div id="header">
    </div>
</div>

<div id="content">
</div>

</body>