Question

我的页脚不会伸展100％。其他一切都很好。很抱歉，如果这很容易，但我刚刚开始编码，这是我自己建立的第一个网站。如果有人能帮助我，那就太好了。

html：

     <!DOCTYPE html>
<html>
  <head>
    <title>Nate Thomas | Web Developer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Lobster|Bree+Serif' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <header>
      <h1 class="main-header">Nate Thomas</h1>
      <h2 class="secondary-header">Web Developer</h2>
<!------------------------
      <ul>
        <li><a href="http://www.twitter.com/itsnatetho"><img src="img/social_media_icons_triangle_set_64x64_0002_twitter.png"></a></li>
        <li><a href="#"><img src="img/social_media_icons_triangle_set_64x64_0019_behance.png"></a></li>
        <li><a href="#"><img src="img/social_media_icons_triangle_set_64x64_0010_linkedin.png"></a></li>
      </ul>
------------------------->
    </header>
<!---Start Main Body--->
    <div id="wrapper">

      <div class="profile-pic">
        <img src="img/me-fireworks.jpeg">
      </div>

      <div class="about">
        <h2>About Me</h2>
        <p>My name is Nate Thomas. I am a front end web developer living on the Eastern Shore of Maryland. I currently work full-time doing a job I hate but recently found my passion on the web. I work everyday perfecting my skills so one day this can be my full-time job.</p>
      </div>

      <div class="work">
        <h2>My Work</h2>
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">

    </div>
<!---End of Main Body--->    
    <footer id="footer">
      <h2>Get in Touch!</h2>
      <ul class="contact">
        <li><a href="http://www.twitter.com/itsnatetho"><img src="img/tweet.png"></a></li>
        <li><a href="#"><img src="img/instagram.png"></a></li>
        <li><a href="#"><img src="img/behance.png"></a></li>
        <li><a href="#"><img src="img/skype.png"></a></li>
      </ul>
      For all business inquiries please email at <a href="mailto:contactnatenow@gmail.com">contactnatenow@gmail.com</a>

    </footer>
  </body>
</html>





* {
 box-sizing: border-box; 
}

body {
  width: 100%;
  background-image: url(img/mochaGrunge.png);
  font-size: 1em;
  margin: 0;
}

header {
  width: 100%;
  padding-top: 5px;
  margin: 10px 0;
  height: 130px;
  background-color: dodgerblue;
  text-align: center;

}

.main-header {
  text-align: center;
  font-size: 3em;
  margin: 10px;
  font-family: 'Lobster', 'cursive';
}

.secondary-header {
  text-align: center;
  margin: -10px 0;
  font-size: 1.4em
}

#wrapper {
  width: 75%;
  margin: auto;
}

.profile-pic img {
  width: 75%;
  border-color: black solid 4px;
  border-radius: 20px;
}

.profile-pic {
  text-align: center;
  margin: 10px;

}

h2 {
  text-align: center;
  font-size: 2.5em;
  font-family: 'Bree Serif', 'sans-serif';
  padding: 5px;
  margin-bottom: 15px;
  background-color: dodgerblue;
  letter-spacing: 1.5px;
}

p {
  padding: 10px 0;
  font-family: 'Bree Serif', 'sans-serif';
  margin-bottom: -15px;
}

.work img {
  width: 100%;
  margin-bottom: 5px
}

#footer {
  width: 100%;

}

Answer 1

关闭你的包装，它在你开始你的页脚之前仍然打开。

      <div class="work">
        <h2>My Work</h2>
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250">
    </div>
</div> //add this

Answer 2

我发现了错误！我忘了关闭我的#wrapper div！

页脚不会延伸100％

2 个答案: