这种布局实际上在网络上无处不在，但似乎没有人提供有关其工作原理的任何信息。我需要将内容置于中心，背景需要扩展页面的整个宽度示例http://www.fuerstlaw.com/（蓝色bg颜色扩展整个宽度）。这是如何使用CSS完成的？我觉得这很简单，但是无法理解。
这是我的代码，因为我只是尝试至少让标题在此链接上工作到网站的http://gsringolaw.com/home
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#masthead {
min-width: 100%;
margin: 0px;
padding: 0px;
background-position: 0px 0px;
background-color: #00304F;
position: relative;
z-index: 0;
}
#headertext {
position: relative;
width: 250px;
height: 82px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
font-size: large;
top: -41px;
left: 704px;
}
#glow {
height: 170px;
background-image: url('images/glow.png');
position: relative;
background-repeat: no-repeat;
background-position: center;
top: -192px;
left: -13px;
width: 973px;
}
#logo {
position: relative;
background-image: url('images/gayleringo.png');
background-repeat: no-repeat;
width: 528px;
height: 113px;
top: 28px;
left: 0px;
}
<div id="wrapper">
<div id="masthead" style="height: 171px">
<div id="logo">
</div>
<div id="headertext" class="auto-style1">
Louisiana: 504-975-0180<br />
<br />
Florida: 850-292-7059</div>
<div id="glow">
</div>
</div>
<div id="top_nav">
</div>
<div id="container">
<div id="right_col">
</div>
<div id="page_content">
</div>
</div>
<div id="footer">
</div>
</div>
答案 0 :(得分：4)
要实现这一点，您需要一个包装器和保存内容的实际div。
<div id="wrapper">
<div id="content">
Content
</div>
</div>
然后，您将背景设置为#wrapper，并将width和margin: 0 auto提供给#content以使其居中。
#wrapper {
background: red;
}
#content {
width: 960px;
margin: 0 auto;
}
由于其display: block，outter div将扩展到页面宽度的100％。然后内部div以固定宽度居中。实际上，背景不是来自内容本身，而是来自包装器
我喜欢做的是给内部div一个.inside类，然后应用于我想要的任何div。例如：
<div id="header">
<div class="inside">
Header
</div>
</div>
<div id="main">
<div class="inside">
Main content
</div>
</div>
<div id="footer">
<div class="inside">
Footer
</div>
</div>
您可以在此处查看示例：http://codepen.io/joe/pen/bxueF
答案 1 :(得分：2)
在div之外添加另一个#wrapper元素并为其指定background-color。
<div id="full-width">
<div id="wrapper">
<div id="masthead" style="height: 171px">
<div id="logo">
</div>
<div id="headertext" class="auto-style1">
Louisiana: 504-975-0180
<br>
<br>
Florida: 850-292-7059
</div>
<div id="glow">
</div>
</div>
</div>
</div>
#full-width {
width: 100%;
background: #00304F;
}
答案 2 :(得分：0)
您所拥有的页面使用背景图像。如果右键单击页面，检查元素，然后查看Body，您将看到以下样式已级联：
body {
...,
background-image: url(images/bg-body.gif);
background-repeat: repeat-x;
background-position: 0px 181px;
}
答案 3 :(得分：0)
要么是标头
width:auto
并且在包装器之外
或包装和母马
width:auto
答案 4 :(得分：0)
你可以试试。
<div id="wrapper">
<div id="banner">
<div id="banner-inside">
<div id="content">content</div>
</div>
</div>
</div>
//css
#wrapper{
width:100%;
}
#banner{
width:100%;
background-color:blue;
}
#banner-inside{
width:980px;
margin:0 auto;
}
#content{ position:relative; top:0;}
答案 5 :(得分：0)
#content{
width: 960px; //tells the div to be exactly 960px wide
margin: 0 auto; //tells the content to be centered with 0 px to surrounding object
background-color: red;
}
#background{
width: 100%; //tells the outer div to be 100% of screen width
background-color: blue;
}
创建两个div，其中id内容位于名为background的内容中。
答案 6 :(得分：0)
您需要彩色DIV宽度为100％。在此DIV内，您剩余的DIV和其他任何元素/图片都会设置为width和margin 0 auto。
#masthead {
min-width: 100%;
margin: 0px;
padding: 0px;
background-position: 0px 0px;
background-color: #00304F;
position: relative;
z-index: 0;
}
#divInsideIt {
width:800px;
margin: 0 auto;
}
答案 7 :(得分：0)
body {height:100%;font-size:12px;}
body, body > section, body > header {width: 100%;margin:0; padding:0;}
.container {width:960px; margin:0 auto;}
header {
background: #1234ff;
margin-bottom:3em;}
header .container {
background: #123456;
padding: 0 1em;
*zoom: 1;/* clear floats fix - fix for IE*/}
header .container:after { /* clear floats fix */
content: ""; display: table; clear: both; }
/* Logo */
header h1, header h1 a {
background: url('/images/logo.png') no-repeat; /*set the url of your image and make sure it does repeat*/
height:60px; /*set this to the height of your logo*/
width: 175px; /*set this to the width of your logo*/}
/*Now we want to float the logo and the phone number sections so that the appear on the left and right*/
header h1 {float:left;}
header aside {float:right;}
/*make logo clickable, must set anchor to same size as its parent*/
header h1 a {
display: block;}
header aside {
background: #123456;
color:white;
padding:.5em 1em;
text-align:right;}
header p {font-size:2em;line-height: .75em;}
HTML
<body id="wrapper">
<header>
<div class="container">
<!--use css to add image to h1--->
<h1><a title="company name" rel="bookmark"></a></h1>
<aside>
<p>Louisiana: <a>504-975-0180</a></p>
<p>Louisiana: <a>504-975-0180</a></p>
</aside>
</div>
</header>
<section>
<div class="container" id="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</section>
</body>