Question

我有这个问题，我的“主”div保存网页的内容滚动在标题和我的导航栏下。我一直在寻找解决方案，人们对position: fixed position: absolute说。但是，当我尝试这些时，div仍会在标题和导航栏下滚动。我还尝试设置top: 980px;来考虑这两个元素的像素大小，它仍然会滚动。

@import url(http://fonts.googleapis.com/css?family=Pacifico);
 body {
  background-image: url("paws1.jpg");
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}
/* 
HEADER ELEMENTS 
*/

img {
  display: block;
}
header {
  width: 950px;
  margin: 0 auto;
  height: 250px;
  position: fixed;
  background-color: rgba(144, 214, 32, 1);
  min-width: 950px;
  z-index: 1;
  top: 0px;
}
header div {
  display: inline-block;
}
#nav {
  width: 950px;
  content: "";
  margin: 0 auto;
  display: block;
  height: 30px;
  line-height: 0;
  position: fixed;
  min-width: 950px;
  background: #8BC43F;
  text-align: center;
}
#account {
  position: relative;
  float: right;
  padding-top: 22px;
}
header ul {
  padding-left: 20px;
}
header li {
  display: inline-block;
}
header li a {
  color: white;
  text-decoration: none;
  padding: 5px;
}
header li a:hover {
  background: #571173;
  border-radius: 3px;
}
#current {
  background-color: rgba(255, 102, 0, 1);
  border-radius: 3px;
  z-index: 2;
}
/*
MAIN CONTENT
*/

#main {
  background: rgba(255, 255, 255, 1);
  width: 950px;
  margin: 0px auto;
  min-width: 950px;
  overflow-x: auto;
  top: 980px;
}
li {
  list-style-type: none;
  margin-left: 20px;
  margin-right: 20px;
}
#splash-left {
  float: left;
  width: 590px;
}
#splash-right {
  float: right;
  width: 300px;
  padding-top: 50px;
  padding-left: 10px;
}
#home-image {
  background: url(../images/mainimage.jpg);
  border-radius: 0px;
  width: 900px;
  margin: 0 auto;
  margin-top: 280px;
  text-align: center;
}
.splash-title {
  font-family: 'Pacifico', cursive;
  font-size: 5em;
}
footer {
  position: relative;
  height: 70px;
  padding-left: 230px;
}

<div id="main">
  <header>
    <img src="Banner.jpg" width="946" height="246" alt="dogwash" style='border:2px solid #000000'>
    <div id="nav">
      <ul>
        <li><a href="Home">Home</a>
        </li>
        <li><a href="BathHouse">DIY Dog Bath House</a>
        </li>
        <li><a href="Services">Professional Services</a>
        </li>
        <li><a href="Products">Products</a>
        </li>
        <li><a href="Contact">Contact Us</a>
        </li>
      </ul>
    </div>
  </header>
  <div id="home-image">
    <div id="splash-left">
      <h1>Brockport, NY Dog Groomer</h1>
      <p><span style="font-size: large;">The Dog Wash "Do-It-Yourself" Bath House</span>
      </p>
      <p><strong>Keep your best friend clean and your house cleaner with our DIY dog bathing services! </strong>No appointments are necessary - just bring in your dog and we'll supply the rest. Bring your pooch into The Dog Wash "Do-It-Yourself" Bath House
        today!</p>
      <p>You'll have your own gated room equipped with a waist high tub, professional shampoos and conditioners, clean towels, an apron and more!</p>
      <p><strong>Professional, certified dog grooming services</strong>
        <br>We love your dog almost as much as you do! Certified groomer Patti Francisco has 7 years of experience, and will provide your dog with a gentle, professional trimming to help him look his best.</p>
      <p><strong>Get to know The Dog Wash!</strong>
      </p>
      <ul>
        <li><a href="http://diydogwash.com/brockport-ny-diy-dog-bathing.htm">DIY Dog Bath House </a>- No appointments necessary - leave the mess with us!</li>
        <li><a href="http://diydogwash.com/brockport-ny-dog-grooming.htm">Professional Services</a> - We also offer professional dog grooming by a certified groomer</li>
        <li><a href="http://diydogwash.com/brockport-ny-dog-grooming-supplies-collars-dog-toys.htm">Products</a> - Professional shampoos and conditioners, brand name collars and leads, and more</li>
      </ul>
      <p><strong>Cleanliness is king!</strong>
        <br>Sanitation is very important to us. That's why all of the tubs and equipment are fully cleaned and sanitized after each use.</p>
      <p><strong>Keep your dog clean without the mess! Call The Dog Wash at 585-637-7098 for a grooming appointment, or bring him into 4612 Lake Rd S. for DIY bathing services.</strong>
        <img src="Dogs.jpg" width="550" height="200" alt="dogs" align="right">
    </div>
    <div id="splash-right">
      <img src="Coupon.jpg" width="270" height="500" alt="coupon" style='border:2px solid #000000'>
    </div>
    <br clear="all" />
  </div>
</div>
<footer>
  <div id="footer">
    <br />
    <a href="https://www.facebook.com/pages/The-Dog-Wash-Do-It-Yourself-Bath-House-for-Pets/122644714485385" target="_blank">
      <img src="fb.png" width="50" height="50" alt="thumb">
    </a>
  </div>
</footer>

以下是快速视觉的网站链接： http://www.itss.brockport.edu/~rsiss1/cis442/ADogWash/Home

Answer 1

http://jsfiddle.net/t5fouf4u/1/。我无法在小提琴中看到你所有的问题。如果你还有别的东西，请告诉我。

header {
  width: 950px;
  margin: 0 auto;
  height: 250px;
  background-color: rgba(144, 214, 32, 1);
  min-width: 950px;
  z-index: 1;
  top: 0px;
}
header div {
  display: inline-block;
}
#nav {
  width: 950px;
  content: "";
  margin: 0 auto;
  display: block;
  height: 30px;
  line-height: 0;
  min-width: 950px;
  background: #8BC43F;
  text-align: center;
}
#nav ul {
    margin:0px;
}

防止主div在Header下面滚动

1 个答案: