仅向左和向右应用背景颜色;排除中间

时间：2016-12-08 02:58:19

标签： html css

我正在尝试在主网站内容的左侧和右侧应用一种背景颜色，同时保持网站的中间页眉/正文/页脚部分的颜色不同。换句话说，我希望页面的左右部分为蓝色（例如），而中间（显示所有内容）为白色。

我尝试了一些东西 - 导致主要是白色的主要部分 - 但是如果没有内容占据页面的其余部分，则周围的颜色会填充空间而不是白色。您可以在“欢迎！”中看到此问题的示例。部分。 

section, aside, h1 {
  margin: 0;
  padding: 0;
}
section, aside {
  margin-top: 1.5em;
  margin-bottom: 1em;
}
/*Body styles*/
body {
  height: 100%;
  width: 1100px; 
  margin: 0 auto; 
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  background-color: #eff0f6;
}
/*Header styles*/
header {
  border-bottom: 1px solid gray;
  background-color: #ffffff;
}
header #logo {
  height: 120px;
  width: 120px;
  float: left;
  padding-top: 5px; 
  padding-bottom: 5px;
  padding-left: 5px;
}
header h1 {
  color: black;
  margin-left: 100px;
  padding-top: 0.5em;
  padding-left: 1em;
}

header h2 {
  color: black;
  margin-left: 100px;
  margin-bottom: .2em;
  padding-left: 1.5em;
}


/*Navigation styles*/

#nav_menu {
  list-style: none;
  font-weight: bold;
  margin-bottom: 0px;
  border-bottom: 1px solid gray;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  height:40px;
}

#nav_menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
  width: 100%;
  float: left;
}

#nav_menu li {
  margin: 0px;
}

#nav_menu li a {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  float: left;
}

#nav_menu li a:hover {
  color: #FFFFFF;
  background-color: #cf2033;
}

.social {
  height: 35px;
  weight; 35px;
  padding-top: 2px;
  padding-right: 2px;
  padding-left: 2px;
}


/*Section styles*/

section {
  width: 764px;
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  background-color: #ffffff;
  margin-top: 0px;
}

/*Aside styles*/

aside {
  width: 275px;
  float: right;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-left: 1px solid gray;
  background-color: #ffffff;
  margin-top: 0px;
  margin-bottom: 0px;
}

aside h1 {
  font-size: 125%;
}

aside #johnjenkinsphoto1 {
  height: 200px;
  width: 275px;
  padding-right: 2px;
  padding-bottom: 20px;
  float: left;
}

aside p {
  margin-bottom: .5em;
}

/*Footer styles*/

footer {
  clear: both;
  padding: 5px;
  margin-top: 1em;
  border-top: 1px solid gray;
  background-color: #ffffff;
}
<html>

<head>
	<title>Coach John R. Jenkins | Consultant, Personal Trainer, Speaker</title>
	<link rel="stylesheet" href="main.css">
</head>

<body>
  <header>
      <img src="fitness icon1.png" alt="Title of Website" id="logo" width="80">
      <hgroup>
          <h1>Coach John R. Jenkins</h1>
          <h2>Your Virtual Guide to Wellness, Performance, and Success</h2>
      </hgroup>
      <br>
  </header>
    <nav id="nav_menu">
    <ul>
    <li><a href="starthere.html">START HERE</a></li>
    <li><a href="consulting.html">CONSULTING</a></li>
    <li><a href="training.html">TRAINING</a></li>
    <li><a href="speaking.html">SPEAKING</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    <a href="http://www.pinterest.com" target="_blank"><img src="pinterest.png" alt="Coach John Jenkins on Pinterest" class="social" align="right"></a>     
    <a href="http://www.instagram.com" target="_blank"><img src="instagram.png" alt="Coach John Jenkins on Instagram" class="social" align="right"></a>    
    <a href="http://www.flickr.com" target="_blank"><img src="flickr.png" alt="Coach John Jenkins on Flickr" class="social" align="right"></a>    
    <a href="http://www.facebook.com" target="_blank"><img src="facebook.png" alt="Coach John Jenkins on Facebook" class="social" align="right"></a>
    </ul>
  </nav>
  <aside>
      <h1 align="center">About Coach Jenkins</h1><br>
      <img src="coachjohnjenkinsphoto1.png" alt="Photo of Coach John Jenkins" id="johnjenkinsphoto1"><br><br>
      <p>A brief collection of biographical information for Coach Jenkins may go here. <br><br>
      	Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
      </p>
  </aside>
  <section>
      <h1>Welcome!</h1>
      <p>In this section, I intend to provide summary information pertaining to the purpose of this website. Such information will first be quickly broken down as follows:
      	<ul>
    	<li>First piece of summary information goes here.</li>
    	<li>Second piece of summary information goes here.</li>
    	<li>Third piece of summary information goes here.</li>
    	</ul>
    	Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
    	</p>
  </section>
  <footer>&copy; Copyright 2016 John R. Jenkins</footer>
</body>
</html>

我还将我的HTML和CSS放在一个小提琴中：https://jsfiddle.net/js_jenkins/oLdo5m7e/

有什么建议吗？

3 个答案:

答案 0 :(得分：0)

您必须将正文保持为width:100%并添加另一个div以将宽度控制为1100px 

body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #eff0f6;
}
body > div {
  height: 100%;
  width: 1100px;
  margin: 0 auto;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  background-color: white;
}

＆＃13;
＆＃13; 
section,
aside,
h1 {
  margin: 0;
  padding: 0;
}
section,
aside {
  margin-top: 1.5em;
  margin-bottom: 1em;
}
/*Body styles*/

body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #eff0f6;
}
body > div {
  height: 100%;
  width: 1100px;
  margin: 0 auto;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  background-color: white;
}
/*Header styles*/

header {
  border-bottom: 1px solid gray;
  background-color: #ffffff;
}
header #logo {
  height: 120px;
  width: 120px;
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
header h1 {
  color: black;
  margin-left: 100px;
  padding-top: 0.5em;
  padding-left: 1em;
}
header h2 {
  color: black;
  margin-left: 100px;
  margin-bottom: .2em;
  padding-left: 1.5em;
}
/*Navigation styles*/

#nav_menu {
  list-style: none;
  font-weight: bold;
  margin-bottom: 0px;
  border-bottom: 1px solid gray;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  height: 40px;
}
#nav_menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
  width: 100%;
  float: left;
}
#nav_menu li {
  margin: 0px;
}
#nav_menu li a {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  float: left;
}
#nav_menu li a:hover {
  color: #FFFFFF;
  background-color: #cf2033;
}
.social {
  height: 35px;
  weight;
  35px;
  padding-top: 2px;
  padding-right: 2px;
  padding-left: 2px;
}
/*Section styles*/

section {
  width: 764px;
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  background-color: #ffffff;
  margin-top: 0px;
}
/*Aside styles*/

aside {
  width: 275px;
  float: right;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-left: 1px solid gray;
  background-color: #ffffff;
  margin-top: 0px;
  margin-bottom: 0px;
}
aside h1 {
  font-size: 125%;
}
aside #johnjenkinsphoto1 {
  height: 200px;
  width: 275px;
  padding-right: 2px;
  padding-bottom: 20px;
  float: left;
}
aside p {
  margin-bottom: .5em;
}
/*Footer styles*/

footer {
  clear: both;
  padding: 5px;
  margin-top: 1em;
  border-top: 1px solid gray;
  background-color: #ffffff;
}
＆＃13; 
<html>

<head>
  <title>Coach John R. Jenkins | Consultant, Personal Trainer, Speaker</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div>
    <header>
      <img src="fitness icon1.png" alt="Title of Website" id="logo" width="80">
      <hgroup>
        <h1>Coach John R. Jenkins</h1>
        <h2>Your Virtual Guide to Wellness, Performance, and Success</h2>
      </hgroup>
      <br>
    </header>
    <nav id="nav_menu">
      <ul>
        <li><a href="starthere.html">START HERE</a>
        </li>
        <li><a href="consulting.html">CONSULTING</a>
        </li>
        <li><a href="training.html">TRAINING</a>
        </li>
        <li><a href="speaking.html">SPEAKING</a>
        </li>
        <li><a href="contact.html">CONTACT</a>
        </li>
        <a href="http://www.pinterest.com" target="_blank">
          <img src="pinterest.png" alt="Coach John Jenkins on Pinterest" class="social" align="right">
        </a>
        <a href="http://www.instagram.com" target="_blank">
          <img src="instagram.png" alt="Coach John Jenkins on Instagram" class="social" align="right">
        </a>
        <a href="http://www.flickr.com" target="_blank">
          <img src="flickr.png" alt="Coach John Jenkins on Flickr" class="social" align="right">
        </a>
        <a href="http://www.facebook.com" target="_blank">
          <img src="facebook.png" alt="Coach John Jenkins on Facebook" class="social" align="right">
        </a>
      </ul>
    </nav>
    <aside>
      <h1 align="center">About Coach Jenkins</h1>
      <br>
      <img src="coachjohnjenkinsphoto1.png" alt="Photo of Coach John Jenkins" id="johnjenkinsphoto1">
      <br>
      <br>
      <p>A brief collection of biographical information for Coach Jenkins may go here.
        <br>
        <br>Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
      </p>
    </aside>
    <section>
      <h1>Welcome!</h1>
      <p>In this section, I intend to provide summary information pertaining to the purpose of this website. Such information will first be quickly broken down as follows:
        <ul>
          <li>First piece of summary information goes here.</li>
          <li>Second piece of summary information goes here.</li>
          <li>Third piece of summary information goes here.</li>
        </ul>
        Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
      </p>
    </section>
    <footer>&copy; Copyright 2016 John R. Jenkins</footer>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

假设我的问题是正确的：

您可以使用百分比90%获取正文和自动边距，并将背景添加到html标记中。

还将section宽度更改为auto以防止溢出。

＆＃13;
＆＃13; 
html {
  background-color: blue;
}
section,
aside,
h1 {
  margin: 0;
  padding: 0;
}
section,
aside {
  margin-top: 1.5em;
  margin-bottom: 1em;
}
/*Body styles*/

body {
  height: 100%;
  width: 90%;
  margin: 0 auto;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  background-color: #eff0f6;
}
/*Header styles*/

header {
  border-bottom: 1px solid gray;
  background-color: #ffffff;
}
header #logo {
  height: 120px;
  width: 120px;
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
header h1 {
  color: black;
  margin-left: 100px;
  padding-top: 0.5em;
  padding-left: 1em;
}
header h2 {
  color: black;
  margin-left: 100px;
  margin-bottom: .2em;
  padding-left: 1.5em;
}
/*Navigation styles*/

#nav_menu {
  list-style: none;
  font-weight: bold;
  margin-bottom: 0px;
  border-bottom: 1px solid gray;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  height: 40px;
}
#nav_menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
  width: 100%;
  float: left;
}
#nav_menu li {
  margin: 0px;
}
#nav_menu li a {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  float: left;
}
#nav_menu li a:hover {
  color: #FFFFFF;
  background-color: #cf2033;
}
.social {
  height: 35px;
  weight;
  35px;
  padding-top: 2px;
  padding-right: 2px;
  padding-left: 2px;
}
/*Section styles*/

section {
  width: auto;
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  background-color: #ffffff;
  margin-top: 0px;
}
/*Aside styles*/

aside {
  width: 275px;
  float: right;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-left: 1px solid gray;
  background-color: #ffffff;
  margin-top: 0px;
  margin-bottom: 0px;
}
aside h1 {
  font-size: 125%;
}
aside #johnjenkinsphoto1 {
  height: 200px;
  width: 275px;
  padding-right: 2px;
  padding-bottom: 20px;
  float: left;
}
aside p {
  margin-bottom: .5em;
}
/*Footer styles*/

footer {
  clear: both;
  padding: 5px;
  margin-top: 1em;
  border-top: 1px solid gray;
  background-color: #ffffff;
}
＆＃13; 
<html>

<head>
  <title>Coach John R. Jenkins | Consultant, Personal Trainer, Speaker</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <header>
    <img src="fitness icon1.png" alt="Title of Website" id="logo" width="80">
    <hgroup>
      <h1>Coach John R. Jenkins</h1>
      <h2>Your Virtual Guide to Wellness, Performance, and Success</h2>
    </hgroup>
    <br>
  </header>
  <nav id="nav_menu">
    <ul>
      <li><a href="starthere.html">START HERE</a>
      </li>
      <li><a href="consulting.html">CONSULTING</a>
      </li>
      <li><a href="training.html">TRAINING</a>
      </li>
      <li><a href="speaking.html">SPEAKING</a>
      </li>
      <li><a href="contact.html">CONTACT</a>
      </li>
      <a href="http://www.pinterest.com" target="_blank">
        <img src="pinterest.png" alt="Coach John Jenkins on Pinterest" class="social" align="right">
      </a>
      <a href="http://www.instagram.com" target="_blank">
        <img src="instagram.png" alt="Coach John Jenkins on Instagram" class="social" align="right">
      </a>
      <a href="http://www.flickr.com" target="_blank">
        <img src="flickr.png" alt="Coach John Jenkins on Flickr" class="social" align="right">
      </a>
      <a href="http://www.facebook.com" target="_blank">
        <img src="facebook.png" alt="Coach John Jenkins on Facebook" class="social" align="right">
      </a>
    </ul>
  </nav>
  <aside>
    <h1 align="center">About Coach Jenkins</h1>
    <br>
    <img src="coachjohnjenkinsphoto1.png" alt="Photo of Coach John Jenkins" id="johnjenkinsphoto1">
    <br>
    <br>
    <p>A brief collection of biographical information for Coach Jenkins may go here.
      <br>
      <br>Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
    </p>
  </aside>
  <section>
    <h1>Welcome!</h1>
    <p>In this section, I intend to provide summary information pertaining to the purpose of this website. Such information will first be quickly broken down as follows:
      <ul>
        <li>First piece of summary information goes here.</li>
        <li>Second piece of summary information goes here.</li>
        <li>Third piece of summary information goes here.</li>
      </ul>
      Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
    </p>
  </section>
  <footer>&copy; Copyright 2016 John R. Jenkins</footer>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我不确定是否所有浏览器都支持它，所以以防万一，添加简单的背景色可能是个好主意，但我认为您正在寻找它：

body {
  background-color: white;
  background-image: linear-gradient(to right, red, white, white, red);
}
相关问题
最新问题