logo标签列表

如何将网站头部背景颜色延伸至整个浏览器窗口？

htmlcss
3

我很难创建让背景色在浏览器中延伸的效果

以下是一些代码

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;
}

当然，您可以看到我已经在body中指定了宽度为980像素，这当然也适用于header，您有什么解决方法吗？
顺便说一下，这个黑色的条是一个包含头部的div。
提前感谢。
这可能是重复的。https://dev59.com/SkzSa4cB1Zd3GeqPjyFi http://stackoverflow.com/questions/4725690/how-to-stretch-header-across-the-screen - Mr. Black
我看到了这个问题，但它没有回答关于居中元素的问题，即使用margin: 0 auto;我想要做的是，默认情况下标题与内容一起占用980像素的宽度，而背景颜色不能超过980像素，并且我的问题是在大屏幕上显示不好看。 - Mohamed Hassan
1个回答
2

您需要将头部包装器放在宽度为100％的body内，并在标题和下方内容上指定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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接