Question

所以我在我的第三个内容div中添加了几张图片，这使得页脚重叠或粘贴在页面的中间或者我认为顶部的那种。我尝试过的是添加底部：0，位置：绝对和位置：相对。

帮助表示赞赏。：d

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: 'source_sans_prolight';
  src: url('font1/sourcesanspro-light-webfont.woff2') format('woff2'), url('font1/sourcesanspro-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'quicksandregular';
  src: url('font2/quicksand-regular-webfont.woff2') format('woff2'), url('font2/quicksand-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
a {
  text-decoration: none;
  color: white;
}
p {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  text-align: justify;
  color: #E6E6E6;
}
h1 {
  font-family: 'quicksandregular';
  font-size: 26px;
  text-align: center;
  color: white;
}
h2 {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  color: white;
  padding-top: 0px;
  padding-left: 15px;
  height: 26px;
}
h3 {
  font-family: 'quicksandregular';
  font-size: 20px;
  text-align: center;
}
h4 {
  font-family: 'quicksandregular';
  font-size: 18px;
  text-align: center;
  color: black;
}
h5 {
  font-family: 'quicksandregular';
  font-size: 26px;
  color: black;
}
img {
  max-width: 100%;
  height: auto;
}
.Header {
  background-color: white;
  width: 100%;
  height: 60px;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  opacity: 0.9;
  position: absolute;
}
.menubutton {
  font-family: 'source_sans_prolight';
  background-color: #EBEBEB;
  color: black;
  width: 100px;
  height: 60px;
  border: none;
  font-size: 18px;
  opacity: 0.8;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.menu {
  float: right;
  position: relative;
}
.dropdown {
  display: none;
  position: absolute;
  background-color: #EBEBEB;
  width: 100px;
}
.dropdown a {
  font-family: 'source_sans_prolight';
  color: black;
  text-decoration: none;
  text-align: center;
  display: block;
  min-height: 20px;
  padding: 10px;
}
.dropdown a:hover {
  background-color: #CBCBCB;
  color: white;
}
.menu:hover .dropdown {
  display: block;
}
.menu:hover .menubutton {
  background-color: #303030;
  color: white;
  opacity: 1;
}
.Logo {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
}
.socialbutton1 {
  float: left;
  height: 50px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 10px;
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.socialbutton1:hover {
  opacity: 1;
}
.socialbutton2 {
  float: left;
  height: 50px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 15px;
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.socialbutton2:hover {
  opacity: 1;
}
.container1 {
  width: 100%;
  height: 400px;
}
.bkimage1 {
  background-image: url(images/image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 800px;
}
.title {
  width: 510px;
  padding-top: 150px;
  margin: 0 auto;
}
.title p {
  font-family: 'source_sans_prolight';
  font-size: 17px;
  text-align: center;
  color: #E6E6E6;
  padding-top: 10px;
}
.title h1 {
  font-family: 'quicksandregular';
  font-size: 60px;
  text-align: center;
  color: white;
  height: 50px;
}
.readmore {
  padding-top: 10px;
  width: 100px;
  margin: 0 auto;
}
.readmore1 {
  border: 2px solid white;
  width: 100px;
  height: 40px;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  opacity: 0.5;
  font-family: 'source_sans_prolight';
  font-size: 15px;
  text-align: center;
}
.readmore1:hover {
  opacity: 1;
  background-color: white;
}
.content {
  margin: 0 auto;
  display: flex;
  width: 1024px;
  height: 400px;
}
.firsti {
  margin: 0 auto;
  padding-top: 45px;
  width: 440px;
}
.firstp {
  width: 450px;
  margin: 0 auto;
}
.firstp p {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  color: black;
  text-align: justify;
}
.container2 {
  height: 600px;
}
.bkimage2 {
  height: 1000px;
  background-image: url(images/image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.content2title {
  margin: 0 auto;
  padding-top: 30px;
}
.content2 {
  margin: 0 auto;
  padding-top: 30px;
  height: 1000px;
  width: 1024px;
  display: flex;
}
.footerbk {
  width: 100%;
  height: 300px;
  background-color: #070707;
  bottom: 0;
  position: absolute;
}
.footer {
  margin: 0 auto;
  width: 500px;
  height: 180px;
  float: left;
  padding-left: 10px;
  padding-top: 20px;
}
.copyright {} .contact {
  padding-top: 5px;
}
.contact a {
  color: #ec4e8c;
  font-family: 'quicksandregular';
  font-size: 20px;
}
.footer2 {
  margin: 0 auto;
  width: 500px;
  float: right;
  padding-top: 20px;
}
.footerlinks {} .footerlink1 {
  padding-left: 15px;
  display: inline;
  transition: .10s ease-in-out;
  -moz-transition: .10s ease-in-out;
  -webkit-transition: .10s ease-in-out;
}
.footerlink1:hover {
  opacity: 0.7;
}
.footerlink2 {
  display: inline;
  padding-left: 20px;
  transition: .10s ease-in-out;
  -moz-transition: .10s ease-in-out;
  -webkit-transition: .10s ease-in-out;
}
.footerlink2:hover {
  opacity: 0.7;
}
@media screen and (max-width: 960px) {
  .Header {
    position: relative;
  }
  .container1 {
    padding-top: 0px;
  }
  .bkimage1 {
    background-image: url(images/image1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
  }
  .title {
    width: 90%;
    padding-top: 10px;
  }
  .title h1 {
    font-family: 'quicksandregular';
    font-size: 80px;
    text-align: center;
    color: white;
    height: 100px;
  }
  .content {
    display: inline;
    width: 90%;
  }
  .firsti {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .firstp {
    width: 90%;
  }
  .c2leftimage {
    margin: 0 auto;
    max-width: 90%;
    heigh: auto;
  }
  .c2rightimage {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .container2 {
    height: 1300px;
  }
  .bkimage2 {
    height: 1300px;
  }
  .content2title {
    padding-top: 30px;
  }
  .content2 {
    display: inline;
  }
  .footerbk {
    height: 630px;
  }
  .footer {
    width: 90%;
  }
  .footer2 {
    margin: 0 auto;
    padding-top: 10px;
    width: 90%;
  }
  .sponsorer {
    height: 60px;
  }
  .footersponsorer {
    display: inline;
  }
  .kicks {} .ica_maxi {
    padding-left: 0px;
    padding-top: 10px;
  }
  .skor {
    padding-left: 0px;
    padding-top: 10px;
  }
  .sparbanken {
    padding-left: 0px;
    padding-top: 10px;
  }
}
@media screen and (max-width: 320px) {
  .Header {
    position: relative;
  }
  .container1 {} .bkimage1 {
    background-image: url(images/image1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
  }
  .title {
    width: 90%;
  }
  .content {
    display: inline;
    width: 90%;
  }
  .firsti {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .firstp {
    width: 90%;
  }
  .c2leftimage {
    margin: 0 auto;
    max-width: 90%;
    heigh: auto;
  }
  .c2rightimage {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .container2 {
    height: 1200px;
  }
  .bkimage2 {
    height: 1200px;
  }
  .content2title {
    padding-top: 30px;
  }
  .content2 {
    display: inline;
  }
  .footerbk {
    height: 700px;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/style.css" rel="stylesheet">
  <link rel="shortcut icon" href="css/images/favicon.ico">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Royal Q UF</title>

</head>

<body>

  <div class="Header">

    <div class="Logo">

      <a href="index.html">
        <img src="css/images/logo.png" alt="Logo">
      </a>

    </div>

    <div class="social">

      <div class="socialbutton1">
        <img src="css/images/facebook.svg" alt="Facebook">
      </div>

      <div class="socialbutton2">
        <img src="css/images/instagram.svg" alt="Facebook">
      </div>

    </div>

    <div class="menu">

      <button class="menubutton">
        MENU
      </button>

      <div class="dropdown">

        <a href="#social" class="smoothScroll">
    Our Products
    </a>

        <a href="#kontakt" class="smoothScroll">
    Contact Us
    </a>

      </div>
    </div>
  </div>

  <div class="container1">

    <div class="bkimage1">

      <div class="title">

        <h1>
    CLASSIE THEME
    </h1>

        <p>
          Clean WordPress Theme Made by Hans Nilsson
        </p>

      </div>

      <div class="readmore">

        <a href="#content" class="smoothScroll">

          <button class="readmore1">

            Read More

          </button>

      </div>
      </a>
    </div>

    <div class="content">

      <a name="content"></a>

      <div class="firsti">

        <img src="css/images/imageproduct.jpg" alt="Our Product">

      </div>

      <div class="firstp">

        <h5>
    Our Product

    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus arcu arcu, vel pulvinar orci rhoncus laoreet. Nulla at commodo tellus, sodales feugiat justo. Quisque vitae tristique felis. Morbi bibendum quam risus, ac iaculis mi condimentum in. Donec efficitur justo ipsum, ut pretium mi ornare tristique.
    </p>
    
    <p>
Ut mollis leo id tristique euismod. Curabitur hendrerit ipsum sed turpis sagittis, sit amet luctus diam interdum. Ut bibendum mi ut tristique laoreet. Cras blandit nibh auctor urna aliquet, et rhoncus urna mattis. Praesent ornare nisi ac urna malesuada, sit amet rutrum mauris convallis. Fusce eros sapien, congue eu convallis in, tristique non elit. Sed ac mattis magna.
    </p>
    </h5>

      </div>

    </div>

    <a name="social"></a>

    <div class="container2">

      <div class="bkimage2">

        <div class="content2title">

          <h1>
    Some pictures, woop!
    </h1>

        </div>

        <div class="content2">

          <div class="images1">
            <img src="css/images/1.jpg">
            <img src="css/images/2.jpg">
          </div>
          <div class="images2">
            <img src="css/images/3.jpg">
            <img src="css/images/4.jpg">
          </div>

        </div>
      </div>
    </div>

    <div class="footerbk">

      <div class="footer">

        <div class="copyright">

          <p>
            Copyright © 2016 Company. All rights reserved.
          </p>

        </div>

        <div class="contact">

          <p>
            Awesome street 14
          </p>
          <p>
            Email: ourawesomeemail@email.com
          </p>

        </div>
      </div>

      <div class="footer2">

        <div class="footerlinks">

          <h2>
    Links
    </h2>

        </div>

        <div class="footerlink1">

          <a href="#">
    Facebook
    </a>

        </div>

        <div class="footerlink2">

          <a href="#">
    Instagram
    </a>

        </div>
      </div>
    </div>
    <!--Smooth Scroll-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/smoothscroll.js"></script>
    <!--End of Smooth Scroll-->
</body>

</html>

＆＃13;

Answer 1

只需从footerbk类中删除绝对位置

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: 'source_sans_prolight';
  src: url('font1/sourcesanspro-light-webfont.woff2') format('woff2'), url('font1/sourcesanspro-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'quicksandregular';
  src: url('font2/quicksand-regular-webfont.woff2') format('woff2'), url('font2/quicksand-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
a {
  text-decoration: none;
  color: white;
}
p {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  text-align: justify;
  color: #E6E6E6;
}
h1 {
  font-family: 'quicksandregular';
  font-size: 26px;
  text-align: center;
  color: white;
}
h2 {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  color: white;
  padding-top: 0px;
  padding-left: 15px;
  height: 26px;
}
h3 {
  font-family: 'quicksandregular';
  font-size: 20px;
  text-align: center;
}
h4 {
  font-family: 'quicksandregular';
  font-size: 18px;
  text-align: center;
  color: black;
}
h5 {
  font-family: 'quicksandregular';
  font-size: 26px;
  color: black;
}
img {
  max-width: 100%;
  height: auto;
}
.Header {
  background-color: white;
  width: 100%;
  height: 60px;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  opacity: 0.9;
  position: absolute;
}
.menubutton {
  font-family: 'source_sans_prolight';
  background-color: #EBEBEB;
  color: black;
  width: 100px;
  height: 60px;
  border: none;
  font-size: 18px;
  opacity: 0.8;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.menu {
  float: right;
  position: relative;
}
.dropdown {
  display: none;
  position: absolute;
  background-color: #EBEBEB;
  width: 100px;
}
.dropdown a {
  font-family: 'source_sans_prolight';
  color: black;
  text-decoration: none;
  text-align: center;
  display: block;
  min-height: 20px;
  padding: 10px;
}
.dropdown a:hover {
  background-color: #CBCBCB;
  color: white;
}
.menu:hover .dropdown {
  display: block;
}
.menu:hover .menubutton {
  background-color: #303030;
  color: white;
  opacity: 1;
}
.Logo {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
}
.socialbutton1 {
  float: left;
  height: 50px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 10px;
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.socialbutton1:hover {
  opacity: 1;
}
.socialbutton2 {
  float: left;
  height: 50px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 15px;
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.socialbutton2:hover {
  opacity: 1;
}
.container1 {
  width: 100%;
  height: 400px;
}
.bkimage1 {
  background-image: url(images/image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 800px;
}
.title {
  width: 510px;
  padding-top: 150px;
  margin: 0 auto;
}
.title p {
  font-family: 'source_sans_prolight';
  font-size: 17px;
  text-align: center;
  color: #E6E6E6;
  padding-top: 10px;
}
.title h1 {
  font-family: 'quicksandregular';
  font-size: 60px;
  text-align: center;
  color: white;
  height: 50px;
}
.readmore {
  padding-top: 10px;
  width: 100px;
  margin: 0 auto;
}
.readmore1 {
  border: 2px solid white;
  width: 100px;
  height: 40px;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  opacity: 0.5;
  font-family: 'source_sans_prolight';
  font-size: 15px;
  text-align: center;
}
.readmore1:hover {
  opacity: 1;
  background-color: white;
}
.content {
  margin: 0 auto;
  display: flex;
  width: 1024px;
  height: 400px;
}
.firsti {
  margin: 0 auto;
  padding-top: 45px;
  width: 440px;
}
.firstp {
  width: 450px;
  margin: 0 auto;
}
.firstp p {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  color: black;
  text-align: justify;
}
.container2 {
  height: 600px;
}
.bkimage2 {
  height: 1000px;
  background-image: url(images/image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.content2title {
  margin: 0 auto;
  padding-top: 30px;
}
.content2 {
  margin: 0 auto;
  padding-top: 30px;
  height: 1000px;
  width: 1024px;
  display: flex;
}
.footerbk {
  width: 100%;
  height: 300px;
  background-color: #070707;
  bottom: 0;
}
.footer {
  margin: 0 auto;
  width: 500px;
  height: 180px;
  float: left;
  padding-left: 10px;
  padding-top: 20px;
}
.copyright {} .contact {
  padding-top: 5px;
}
.contact a {
  color: #ec4e8c;
  font-family: 'quicksandregular';
  font-size: 20px;
}
.footer2 {
  margin: 0 auto;
  width: 500px;
  float: right;
  padding-top: 20px;
}
.footerlinks {} .footerlink1 {
  padding-left: 15px;
  display: inline;
  transition: .10s ease-in-out;
  -moz-transition: .10s ease-in-out;
  -webkit-transition: .10s ease-in-out;
}
.footerlink1:hover {
  opacity: 0.7;
}
.footerlink2 {
  display: inline;
  padding-left: 20px;
  transition: .10s ease-in-out;
  -moz-transition: .10s ease-in-out;
  -webkit-transition: .10s ease-in-out;
}
.footerlink2:hover {
  opacity: 0.7;
}
@media screen and (max-width: 960px) {
  .Header {
    position: relative;
  }
  .container1 {
    padding-top: 0px;
  }
  .bkimage1 {
    background-image: url(images/image1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
  }
  .title {
    width: 90%;
    padding-top: 10px;
  }
  .title h1 {
    font-family: 'quicksandregular';
    font-size: 80px;
    text-align: center;
    color: white;
    height: 100px;
  }
  .content {
    display: inline;
    width: 90%;
  }
  .firsti {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .firstp {
    width: 90%;
  }
  .c2leftimage {
    margin: 0 auto;
    max-width: 90%;
    heigh: auto;
  }
  .c2rightimage {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .container2 {
    height: 1300px;
  }
  .bkimage2 {
    height: 1300px;
  }
  .content2title {
    padding-top: 30px;
  }
  .content2 {
    display: inline;
  }
  .footerbk {
    height: 630px;
  }
  .footer {
    width: 90%;
  }
  .footer2 {
    margin: 0 auto;
    padding-top: 10px;
    width: 90%;
  }
  .sponsorer {
    height: 60px;
  }
  .footersponsorer {
    display: inline;
  }
  .kicks {} .ica_maxi {
    padding-left: 0px;
    padding-top: 10px;
  }
  .skor {
    padding-left: 0px;
    padding-top: 10px;
  }
  .sparbanken {
    padding-left: 0px;
    padding-top: 10px;
  }
}
@media screen and (max-width: 320px) {
  .Header {
    position: relative;
  }
  .container1 {} .bkimage1 {
    background-image: url(images/image1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
  }
  .title {
    width: 90%;
  }
  .content {
    display: inline;
    width: 90%;
  }
  .firsti {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .firstp {
    width: 90%;
  }
  .c2leftimage {
    margin: 0 auto;
    max-width: 90%;
    heigh: auto;
  }
  .c2rightimage {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .container2 {
    height: 1200px;
  }
  .bkimage2 {
    height: 1200px;
  }
  .content2title {
    padding-top: 30px;
  }
  .content2 {
    display: inline;
  }
  .footerbk {
    height: 700px;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/style.css" rel="stylesheet">
  <link rel="shortcut icon" href="css/images/favicon.ico">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Royal Q UF</title>

</head>

<body>

  <div class="Header">

    <div class="Logo">

      <a href="index.html">
        <img src="css/images/logo.png" alt="Logo">
      </a>

    </div>

    <div class="social">

      <div class="socialbutton1">
        <img src="css/images/facebook.svg" alt="Facebook">
      </div>

      <div class="socialbutton2">
        <img src="css/images/instagram.svg" alt="Facebook">
      </div>

    </div>

    <div class="menu">

      <button class="menubutton">
        MENU
      </button>

      <div class="dropdown">

        <a href="#social" class="smoothScroll">
    Our Products
    </a>

        <a href="#kontakt" class="smoothScroll">
    Contact Us
    </a>

      </div>
    </div>
  </div>

  <div class="container1">

    <div class="bkimage1">

      <div class="title">

        <h1>
    CLASSIE THEME
    </h1>

        <p>
          Clean WordPress Theme Made by Hans Nilsson
        </p>

      </div>

      <div class="readmore">

        <a href="#content" class="smoothScroll">

          <button class="readmore1">

            Read More

          </button>

      </div>
      </a>
    </div>

    <div class="content">

      <a name="content"></a>

      <div class="firsti">

        <img src="css/images/imageproduct.jpg" alt="Our Product">

      </div>

      <div class="firstp">

        <h5>
    Our Product

    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus arcu arcu, vel pulvinar orci rhoncus laoreet. Nulla at commodo tellus, sodales feugiat justo. Quisque vitae tristique felis. Morbi bibendum quam risus, ac iaculis mi condimentum in. Donec efficitur justo ipsum, ut pretium mi ornare tristique.
    </p>
    
    <p>
Ut mollis leo id tristique euismod. Curabitur hendrerit ipsum sed turpis sagittis, sit amet luctus diam interdum. Ut bibendum mi ut tristique laoreet. Cras blandit nibh auctor urna aliquet, et rhoncus urna mattis. Praesent ornare nisi ac urna malesuada, sit amet rutrum mauris convallis. Fusce eros sapien, congue eu convallis in, tristique non elit. Sed ac mattis magna.
    </p>
    </h5>

      </div>

    </div>

    <a name="social"></a>

    <div class="container2">

      <div class="bkimage2">

        <div class="content2title">

          <h1>
    Some pictures, woop!
    </h1>

        </div>

        <div class="content2">

          <div class="images1">
            <img src="css/images/1.jpg">
            <img src="css/images/2.jpg">
          </div>
          <div class="images2">
            <img src="css/images/3.jpg">
            <img src="css/images/4.jpg">
          </div>

        </div>
      </div>
    </div>

    <div class="footerbk">

      <div class="footer">

        <div class="copyright">

          <p>
            Copyright © 2016 Company. All rights reserved.
          </p>

        </div>

        <div class="contact">

          <p>
            Awesome street 14
          </p>
          <p>
            Email: ourawesomeemail@email.com
          </p>

        </div>
      </div>

      <div class="footer2">

        <div class="footerlinks">

          <h2>
    Links
    </h2>

        </div>

        <div class="footerlink1">

          <a href="#">
    Facebook
    </a>

        </div>

        <div class="footerlink2">

          <a href="#">
    Instagram
    </a>

        </div>
      </div>
    </div>
    <!--Smooth Scroll-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/smoothscroll.js"></script>
    <!--End of Smooth Scroll-->
</body>

</html>

＆＃13;

为什么我的页脚会粘在页面中间？

1 个答案: