Question

我是html＆amp;的新手css和我正在练习免费模板，但现在我遇到了问题。我的页眉和页脚右侧有空白区域，底部有一个不会消失的滚动条。有人可以帮我解决这个问题。

摘录：

＆＃13;

@font-face {

  font-family: 'Arimo-Bold';

  src: url('fonts/Arimo-Bold/Arimo-Bold.eot');

  src: url('fonts/Arimo-Bold/Arimo-Bold.woff') format('woff'), url('fonts/Arimo-Bold/Arimo-Bold.ttf') format('truetype'), url('fonts/Arimo-   Bold/Arimo-Bold.svg') format('svg');

}

@font-face {

  font-family: 'ChangaOne';

  src: url('fonts/ChangaOne/ChangaOne-Regular.eot');

  src: url('fonts/ChangaOne/ChangaOne-Regular.woff') format('woff'), url('../fonts/ChangaOne/ChangaOne-Regular.ttf') format('truetype'), url('../fonts/ChangaOne/ChangaOne-Regular.svg') format('svg');

}

@font-face {

  font-family: 'Comfortaa-Regular';

  src: url('fonts/Comfortaa/Comfortaa-Regular.eot');

  src: url('fonts/Comfortaa/Comfortaa-Regular.woff') format('woff'), url('fonts/Comfortaa/Comfortaa-Regular.ttf') format('truetype'), url('fonts/Comfortaa/Comfortaa-Regular.svg') format('svg');

}

body {

  margin: 0px;

  padding: 0px;

  background-color: #ededed;

  font-family: Arial, Helvetica, Sans-Serif;

  line-height: 1;

  overflow: scroll;

}

.Header {

  position: relative;

  top: 0px;

  left: 0px;

  background-color: #4c8f96;

  height: 180px;

  margin-left: auto;

  margin-right: auto;

  padding-right: -5px;

  overflow: hidden;

}

.Header--logo {

  margin-left: 490px;

  margin-top: 55px;

  width: 265px;

  float: left;

}

.Header--Nav {

  float: left;

  text-align: center;

  list-style-type: none;

}

.Header--Nav li {

  float: left;

  list-style-type: none;

  margin-left: 20px;

  margin-right: 0.7px;

  margin-top: 100px;

  color: white;

  font-family: Arial, Helvetica, Sans-Serif;

  font-weight: lighter;

  text-transform: Uppercase;

}

.Header--Nav li:not(.Header--Nav__selected) {

  background-color: #1b2130;

  padding: 5px 20px;

  border-radius: 5px;

  text-align: center;

}

.Header--Nav__selected {

  background-color: #335f64;

  padding: 5px 20px;

  border-radius: 5px;

  text-align: center;

}

.Header--Nav li:hover {

  color: #ccc;

}

.Image {

  clear: left;

  position: relative;

  left: 490px;

  top: 50px;

  height: 356px;

  border: 2px solid #5fb3bd;

  width: 933px;

  background: #fff;

}

.Image img {

  float: left;

  height: 356px;

  padding-right: 20px;

}

.Image--description h1 {

  float: left;

  display: inline;

  font-family: 'ChangaOne';

  font-weight: normal;

  font-size: 40px;

  padding-top: 75px;

  line-height: 50px;

}

.Sections {

  position: relative;

  left: 490px;

  top: 100px;

  width: 956px;

}

.Sections--Sections__1,

.Sections--Sections__2,

.Sections--Sections__3,

.Sections--Sections__4 {

  float: left;

  width: 234px;

  margin-right: 5px;

}

.Sections p {

  font-weight: lighter;

  font-size: 12px;

  line-height: 24px;

  margin-right: 10px;

  width: 230px;

}

.Sections img {

  border: #5fb3bd 5px solid;

}

.Sections span {

  font-weight: normal;

  font-size: 18px;

  text-align: left;

}

.Featured {

  clear: both;

  float: left;

  position: relative;

  top: 140px;

  left: 490px;

  border: #5fb3bd 5px solid;

  background-color: #fff;

  border-radius: 5px;

  width: 450px;

  min-height: 579px;

}

.Featured h2 {

  background-color: #1b2130;

  color: #fff;

  width: 75px;

  margin-top: -14px;

  margin-left: 15px;

  margin-bottom: 25px;

  padding-left: 30px;

  padding-right: 50px;

  line-height: 47px;

  font-family: 'Comfortaa-Regular';

  font-weight: lighter;

  font-size: 22px;

}

.Featured h3 {

  float: left;

  margin-top: -1px;

  margin-left: 30px;

  font-weight: normal;

  font-size: 18px;

  text-align: left;

}

.Featured p {

  clear: both;

  width: 420px;

  font-weight: lighter;

  font-size: 12px;

  line-height: 24px;

  margin-right: 10px;

}

.Featured--Image {

  float: left;

  margin-left: 15px;

  margin-right: 0px;

  margin-bottom: 25px;

}

.Featured--Article {

  margin-left: 15px;

}

.Featured--Article span {

  margin-left: 15px;

}

.Sections {

  float: left;

  overflow: hidden;

}

.Sections--Hairstyle {

  position: relative;

  top: 40px;

  left: 15px;

  border: #5fb3bd 5px solid;

  background-color: #4c8f96;

  border-radius: 5px;

  width: 460px;

  min-height: 250px;

}

.Sections--Hairstyle h2 {

  background-color: #1b2130;

  color: #fff;

  width: 75px;

  margin-top: -14px;

  margin-left: 15px;

  padding-left: 30px;

  padding-right: 50px;

  line-height: 47px;

  font-family: 'Comfortaa-Regular';

  font-weight: lighter;

  font-size: 22px;

}

.Sections--Hairstyle p {

  clear: both;

  width: 420px;

  font-weight: lighter;

  font-size: 12px;

  line-height: 24px;

  margin-right: 0px;

  margin-left: 15px;

  color: #f5f5f5;

}

.Name {

  text-decoration: none;

  color: #f5f5f5;

}

.Sections--Hairstyle .Name1 {

  margin-left: 357px;

  font-size: 20px;

  padding-top: 19px;

  padding-bottom: -10px;

}

.Sections--Hairstyle a:not(.Name) {

  text-decoration: none;

  text-decoration: underline;

  color: #f5f5f5;

}

.Sections--Newsletter {

  position: relative;

  top: 40px;

  left: 15px;

  border: #5fb3bd 5px solid;

  background-color: #4c8f96;

  border-radius: 5px;

  width: 460px;

  min-height: 225px;

  margin-top: 40px;

  margin-bottom: 250px;

}

.Sections--Newsletter p {

  float: left;

  width: 250px;

  line-height: 27px;

}

.Sections--Newsletter img {

  position: relative;

  bottom: 12px;

  float: left;

  border: none;

  height: 245px;

  padding-bottom: 20px;

}

.Sections--Newsletter p {

  float: left;

  border: none;

  font-size: 17.25px;

  line-height: 30px;

  color: #f5f5f5;

  font-weight: bold;

  width: 230px;

  padding-top: 16px;

  padding-left: 24.43px;

}

.Footer {

  clear: left;

  background: #4c8f96;

  border-top: 1px solid #9bd9e0;

  height: 145px;

  overflow: hidden;

  margin-bottom: -10px;

}

.Footer > div {

  margin: 0 auto;

  width: 960px;

  color: #ededed;

  font-size: 12px;

  padding-top: 60px;

  text-align: center;

}

.Footer p {

  float: left;

  margin-left: 230px;

  display: inline-block;

  overflow: hidden;

}

.Footer ul {

  list-style-type: none;

  float: right;

  background-color: #387a82;

  padding-right: 10px;

  padding-left: 10px;

  padding-top: 20px;

  padding-bottom: -50px;

  text-align: center;

  margin-bottom: 30px;

  margin-top: -30px;

  height: 50px;

}

.Footer li {

  display: inline;

  list-style-type: none;

  overflow: hidden;

  padding-top: 0px;

  padding-right: 10px;

  padding-bottom: 10px;

  margin-right: 10px;

  margin-bottom: 20px;

  text-align: center;

}

.Footer--connect {

  float: left;

  display: inline;

  overflow: hidden;

}

＆＃13;

<header class="Header">
  <img src="images/Logooo.png" class="Header--logo">
  <nav class="Header--Nav">
    <ul>
      <li class="Header--Nav__selected">Home</li>
      <li class="Header--Nav__li2">About</li>
      <li class="Header--Nav__li3">Hairstyles</li>
      <li class="Header--Nav__li4">News</li>
      <li class="Header--Nav__li5">Contact</li>
    </ul>
  </nav>
</header>

<div class="Image">
  <img src="images/great-hairstyle.jpg" class="Image--Img">
  <section class="Image--description">
    <h1>Great hairstyle comes<br />from the     experts.</h1>
  </section>
</div>

<section class="Container">

  <section class="Sections">
    <section class="Sections--Sections__1">
      <img src="images/hairstyle17.jpg">
      <p><span>Best Hairstylists</span>
        <br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
    </section>
    <section class="Sections--Sections__2">
      <img src="images/hairstyle18.jpg">
      <p><span>Featured Hairstylists</span>
        <br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
    </section>
    <section class="Sections--Sections__3">
      <img src="images/hairstyle19.jpg">
      <p><span>Hair Care</span>
        <br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
    </section>
    <section class="Sections--Sections__4">
      <img src="images/hairstyle20.jpg">
      <p><span>We "Hair" You</span>
        <br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
    </section>
  </section>
  </div>

  <section class="Featured">
    <h2>Featured</h2>
    <img src="images/featured.jpg" class="Featured--Image">
    <article class="Featured--Article">
      <h3>Hair, I just meet you</h3>
      <p>Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free! You can do a lot with them. You can modify them. You can use them to design websites
        for clients, so long as you agree with the Terms of Use.
        <br />
        <br />You can even remove all our links if you want to. Looking for more templates? Just browse through all our Free Website Templates and find what you’re looking for. But if you don’t find any website template you can use, you can try our Free Web
        Design service and tell us all about it. Maybe you’re looking for something different, something special.
        <br />
        <br />And we love the challenge of doing something different and something special. If you’re experiencing issues and concerns about this website template, join the discussion on our forum and meet other people in the community who share the same interests
        with you. Version 13</p>
    </article>
  </section>

  <section class="Sections">
    <section class="Sections--Hairstyle">
      <h2>Hairstyle</h2>
      <p>This website template has been designed by <a href="">Free Website   Templates</a> for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website
        template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="">Forums</a>.</p>
      <p class="Name1"><a href="" class="Name">Mike M</a>.</span>
      </p>
    </section>

    <section class="Sections--Newsletter">
      <img src="images/skinhead.png" alt="bald man">
      <p>Are you losing your hair? Let us help you in bringing back your confidence.
        <br />Call Us at 1800-0000-0000</p>
    </section>

  </section>

  <footer class="Footer">
    <div <p class="copyright">&copy; copyright 2023 | all rights reserved.</p>
      <ul class="Footer--connect">
        <li>
          <a href="https://twitter.com/">
            <img src="images/icons/icon-  twitter2.png">
          </a>
        </li>
        <li>
          <a href="https://www.facebook.com">
            <img src="images/icons/icon-  facebook.png">
          </a>
        </li>
        <li>
          <a href="https://plus.google.com/">
            <img src="images/icons/googleplus.png">
          </a>
        </li>
        <li>
          <a href="https://www.pinterest.com/">
            <img src="images/icons/pinterest.png">
          </a>
        </li>
      </ul>
    </div>

＆＃13;

Answer 1

您的代码存在的问题是您使用了px表示宽度，高度，左，右间距等。请尝试使用%，以便它们在不同的屏幕尺寸上不会以不同的方式显示

另外，我建议您使用bootstrap这样的框架来构建您的网页，而不是输入整个CSS。

我认为这可以解决您留下间距/滚动问题的问题：

@font-face {
  font-family: 'Arimo-Bold';
  src: url('fonts/Arimo-Bold/Arimo-Bold.eot');
  src: url('fonts/Arimo-Bold/Arimo-Bold.woff') format('woff'), url('fonts/Arimo-Bold/Arimo-Bold.ttf') format('truetype'), url('fonts/Arimo-   Bold/Arimo-Bold.svg') format('svg');
}
@font-face {
  font-family: 'ChangaOne';
  src: url('fonts/ChangaOne/ChangaOne-Regular.eot');
  src: url('fonts/ChangaOne/ChangaOne-Regular.woff') format('woff'), url('../fonts/ChangaOne/ChangaOne-Regular.ttf') format('truetype'), url('../fonts/ChangaOne/ChangaOne-Regular.svg') format('svg');
}
@font-face {
  font-family: 'Comfortaa-Regular';
  src: url('fonts/Comfortaa/Comfortaa-Regular.eot');
  src: url('fonts/Comfortaa/Comfortaa-Regular.woff') format('woff'), url('fonts/Comfortaa/Comfortaa-Regular.ttf') format('truetype'), url('fonts/Comfortaa/Comfortaa-Regular.svg') format('svg');
}
body {
  margin: 0 auto;
  padding: 0px;
  background-color: #ededed;
  font-family: Arial, Helvetica, Sans-Serif;
  line-height: 1;
  overflow: auto;
}
.Header {
  position: relative;
  top: 0px;
  left: 0px;
  background-color: #4c8f96;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  padding-right: -5px;
  overflow: hidden;
}
.Header--logo {
  margin-left: 490px;
  margin-top: 55px;
  width: 265px;
  float: left;
}
.Header--Nav {
  float: left;
  text-align: center;
  list-style-type: none;
}
.Header--Nav li {
  float: left;
  list-style-type: none;
  margin-left: 20px;
  margin-right: 0.7px;
  margin-top: 100px;
  color: white;
  font-family: Arial, Helvetica, Sans-Serif;
  font-weight: lighter;
  text-transform: Uppercase;
}
.Header--Nav li:not(.Header--Nav__selected) {
  background-color: #1b2130;
  padding: 5px 20px;
  border-radius: 5px;
  text-align: center;
}
.Header--Nav__selected {
  background-color: #335f64;
  padding: 5px 20px;
  border-radius: 5px;
  text-align: center;
}
.Header--Nav li:hover {
  color: #ccc;
}
.Image {
  clear: left;
  position: relative;
  //left: 490px;
  top: 50px;
  height: 356px;
  border: 2px solid #5fb3bd;
  width: 100%;
  background: #fff;
}
.Image img {
  float: left;
  height: 356px;
  padding-right: 20px;
}
.Image--description h1 {
  float: left;
  display: inline;
  font-family: 'ChangaOne';
  font-weight: normal;
  font-size: 40px;
  padding-top: 75px;
  line-height: 50px;
}
.Sections {
  position: relative;
  //left: 490px;
  top: 100px;
  //width: 956px;
}
.Sections--Sections__1,
.Sections--Sections__2,
.Sections--Sections__3,
.Sections--Sections__4 {
  float: left;
  width: 234px;
  margin-right: 5px;
}
.Sections p {
  font-weight: lighter;
  font-size: 12px;
  line-height: 24px;
  margin-right: 10px;
  //width: 20%;
}
.Sections img {
  border: #5fb3bd 5px solid;
}
.Sections span {
  font-weight: normal;
  font-size: 18px;
  text-align: left;
}
.Featured {
  clear: both;
  float: left;
  position: relative;
  top: 140px;
//  left: 490px;
  border: #5fb3bd 5px solid;
  background-color: #fff;
  border-radius: 5px;
  width: 450px;
  min-height: 579px;
}
.Featured h2 {
  background-color: #1b2130;
  color: #fff;
  width: 75px;
  margin-top: -14px;
  margin-left: 15px;
  margin-bottom: 25px;
  padding-left: 30px;
  padding-right: 50px;
  line-height: 47px;
  font-family: 'Comfortaa-Regular';
  font-weight: lighter;
  font-size: 22px;
}
.Featured h3 {
  float: left;
  margin-top: -1px;
  margin-left: 30px;
  font-weight: normal;
  font-size: 18px;
  text-align: left;
}
.Featured p {
  clear: both;
  width: 420px;
  font-weight: lighter;
  font-size: 12px;
  line-height: 24px;
  margin-right: 10px;
}
.Featured--Image {
  float: left;
  margin-left: 15px;
  margin-right: 0px;
  margin-bottom: 25px;
}
.Featured--Article {
  margin-left: 15px;
}
.Featured--Article span {
  margin-left: 15px;
}
.Sections {
  float: left;
  overflow: hidden;
}
.Sections--Hairstyle {
  position: relative;
  top: 40px;
  left: 15px;
  border: #5fb3bd 5px solid;
  background-color: #4c8f96;
  border-radius: 5px;
  width: 460px;
  min-height: 250px;
}
.Sections--Hairstyle h2 {
  background-color: #1b2130;
  color: #fff;
  width: 75px;
  margin-top: -14px;
  margin-left: 15px;
  padding-left: 30px;
  padding-right: 50px;
  line-height: 47px;
  font-family: 'Comfortaa-Regular';
  font-weight: lighter;
  font-size: 22px;
}
.Sections--Hairstyle p {
  clear: both;
  width: 420px;
  font-weight: lighter;
  font-size: 12px;
  line-height: 24px;
  margin-right: 0px;
  margin-left: 15px;
  color: #f5f5f5;
}
.Name {
  text-decoration: none;
  color: #f5f5f5;
}
.Sections--Hairstyle .Name1 {
  margin-left: 357px;
  font-size: 20px;
  padding-top: 19px;
  padding-bottom: -10px;
}
.Sections--Hairstyle a:not(.Name) {
  text-decoration: none;
  text-decoration: underline;
  color: #f5f5f5;
}
.Sections--Newsletter {
  position: relative;
  top: 40px;
  left: 15px;
  border: #5fb3bd 5px solid;
  background-color: #4c8f96;
  border-radius: 5px;
  width: 460px;
  min-height: 225px;
  margin-top: 40px;
  margin-bottom: 250px;
}
.Sections--Newsletter p {
  float: left;
  width: 250px;
  line-height: 27px;
}
.Sections--Newsletter img {
  position: relative;
  bottom: 12px;
  float: left;
  border: none;
  height: 245px;
  padding-bottom: 20px;
}
.Sections--Newsletter p {
  float: left;
  border: none;
  font-size: 17.25px;
  line-height: 30px;
  color: #f5f5f5;
  font-weight: bold;
  width: 230px;
  padding-top: 16px;
  padding-left: 24.43px;
}
.Footer {
  clear: left;
  background: #4c8f96;
  border-top: 1px solid #9bd9e0;
  height: 145px;
  overflow: hidden;
  margin-bottom: -10px;
}
.Footer > div {
  margin: 0 auto;
  width: 960px;
  color: #ededed;
  font-size: 12px;
  padding-top: 60px;
  text-align: center;
}
.Footer p {
  float: left;
  margin-left: 230px;
  display: inline-block;
  overflow: hidden;
}
.Footer ul {
  list-style-type: none;
  float: right;
  background-color: #387a82;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: -50px;
  text-align: center;
  margin-bottom: 30px;
  margin-top: -30px;
  height: 50px;
}
.Footer li {
  display: inline;
  list-style-type: none;
  overflow: hidden;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  text-align: center;
}
.Footer--connect {
  float: left;
  display: inline;
  overflow: hidden;
}

<header class="Header">
  <img src="images/Logooo.png" class="Header--logo">
  <nav class="Header--Nav">
    <ul>
      <li class="Header--Nav__selected">Home</li>
      <li class="Header--Nav__li2">About</li>
      <li class="Header--Nav__li3">Hairstyles</li>
      <li class="Header--Nav__li4">News</li>
      <li class="Header--Nav__li5">Contact</li>
    </ul>
  </nav>
</header>

<div class="Image">
  <img src="images/great-hairstyle.jpg" class="Image--Img">
  <section class="Image--description">
    <h1>Great hairstyle comes<br />from the     experts.</h1>
  </section>
</div>

<section class="Container">

  <section class="Sections">
    <section class="Sections--Sections__1">
      <img src="images/hairstyle17.jpg">
      <p><span>Best Hairstylists</span>
        <br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
    </section>
    <section class="Sections--Sections__2">
      <img src="images/hairstyle18.jpg">
      <p><span>Featured Hairstylists</span>
        <br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
    </section>
    <section class="Sections--Sections__3">
      <img src="images/hairstyle19.jpg">
      <p><span>Hair Care</span>
        <br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
    </section>
    <section class="Sections--Sections__4">
      <img src="images/hairstyle20.jpg">
      <p><span>We "Hair" You</span>
        <br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
    </section>
  </section>
  </div>

  <section class="Featured">
    <h2>Featured</h2>
    <img src="images/featured.jpg" class="Featured--Image">
    <article class="Featured--Article">
      <h3>Hair, I just meet you</h3>
      <p>Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free! You can do a lot with them. You can modify them. You can use them to design websites
        for clients, so long as you agree with the Terms of Use.
        <br />
        <br />You can even remove all our links if you want to. Looking for more templates? Just browse through all our Free Website Templates and find what you’re looking for. But if you don’t find any website template you can use, you can try our Free Web
        Design service and tell us all about it. Maybe you’re looking for something different, something special.
        <br />
        <br />And we love the challenge of doing something different and something special. If you’re experiencing issues and concerns about this website template, join the discussion on our forum and meet other people in the community who share the same interests
        with you. Version 13</p>
    </article>
  </section>

  <section class="Sections">
    <section class="Sections--Hairstyle">
      <h2>Hairstyle</h2>
      <p>This website template has been designed by <a href="">Free Website   Templates</a> for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website
        template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="">Forums</a>.</p>
      <p class="Name1"><a href="" class="Name">Mike M</a>.</span>
      </p>
    </section>

    <section class="Sections--Newsletter">
      <img src="images/skinhead.png" alt="bald man">
      <p>Are you losing your hair? Let us help you in bringing back your confidence.
        <br />Call Us at 1800-0000-0000</p>
    </section>

  </section>

  <footer class="Footer">
    <div <p class="copyright">&copy; copyright 2023 | all rights reserved.</p>
      <ul class="Footer--connect">
        <li>
          <a href="https://twitter.com/">
            <img src="images/icons/icon-  twitter2.png">
          </a>
        </li>
        <li>
          <a href="https://www.facebook.com">
            <img src="images/icons/icon-  facebook.png">
          </a>
        </li>
        <li>
          <a href="https://plus.google.com/">
            <img src="images/icons/googleplus.png">
          </a>
        </li>
        <li>
          <a href="https://www.pinterest.com/">
            <img src="images/icons/pinterest.png">
          </a>
        </li>
      </ul>
    </div>

溢出隐藏，不起作用

1 个答案: