logo标签列表

如何将内容居中并将背景颜色延伸到页面的100%？

htmlcsscolorsbackground
4
这种布局几乎在网上无处不在，但似乎没有人提供任何有关它的信息。我需要将内容居中，并且背景需要延伸到整个页面宽度。例如http://www.fuerstlaw.com/ (蓝色背景颜色延伸到整个宽度)。如何使用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>
8个回答
4
为了实现这一点，您需要一个包装器和实际包含内容的div。
<div id="wrapper">
    <div id="content">
        Content
    </div>
</div>

然后你可以给#wrapper设置背景，并给#content设置width和margin: 0 auto，使其居中显示。

#wrapper {
    background: red;
}
#content {
    width: 960px;
    margin: 0 auto;
}

由于外部div使用了display:block属性，它将扩展到整个页面的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。该示例涉及到IT技术相关内容。
2
在你的#wrapper外添加另一个div元素，并为其指定一个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;
 }
这是我每次遇到这个问题时都会使用的解决方案。+1。 - Shrey Gupta
0

你所看到的页面使用了背景图片。如果你右键点击页面，选择检查元素，然后查看Body，你会看到以下样式被级联：

body {
  ...,
  background-image: url(images/bg-body.gif);
  background-repeat: repeat-x;
  background-position: 0px 181px;
}
我考虑过这个问题，但我需要多种颜色，并且我不确定是否可行。Angel Yan在下面使用了背景属性回答了我的问题。非常感谢您的回复！ - Chris Hooks
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;}
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 content，位于名为 background 的 div 内部。
0

你需要让你的有颜色的 DIV 宽度为 100%。在这个 DIV 中放置你剩余的 DIV 和任何其他具有设置宽度和 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;
}
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>
0

无论是页眉还是标志

width:auto

并且在包装器之外

或者包装器和主标题有

width:auto
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接