Question

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<!--<meta name="viewport" content="width=960">
<meta name="viewport" content="width=480">-->

<title>Habitat for Humanity Restore | Home</title>

<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
  <header>
        <div class="headimg">
      <h2 class="slogan1">HOME IMPROVEMENT &amp; FURNITURE OUTLET</h2>
      <h3 class="slogan2"> A clean, happy place to find treasures</h3>
    </div>
  </header>



        <!--
        <div class="socialmedia"><img src="images/facebook-14.png" width="40" height="52" alt="FacebookSM">
        <img src="images/Pinterest-icon.png" width="40" height="52" alt="PinterestLogo">
        <img src="images/twitter-icon.png" width="40" height="52" alt="TwitterLogo"></div>
        -->

    </div> 
    <div id="nav">
        <ul>
            <li><a href="#">SHOP</a></li>
            <li><a href="#">DONATE</a></li>
            <li><a href="#">VOLUNTEER</a></li>
            <li><a href="#">CONTACT US</a></li>
        </ul>
    </div>

 <!-- Tony please fix text shadows, sidebar shadows and nagivation effects --> 

    <div id="sidebarleft">
        <ul class="sidebartextleft">
            <li class="pleftsidebar">ABOUT US</li>
            <li class="pleftsidebar">REPURPOSED </li>
            <li class="pleftsidebar">DONATE</li>
            <li class="pleftsidebar">VOLUNTEER</li>
            <li class="pleftsidebar">UNITED WAY </li>
            <li class="pleftsidebar">NEWSLETTER</li>
            <li class="pleftsidebar">EMAIL US</li>
            <li class="pleftsidebar">SEND US PHOTOS</li>
            <li class="pleftsidebar">MAP TO RESTORE</li>
            <li class="pleftsidebar">DIRECTIONS</li>
        </ul>

            <!--<p>CONTACT US </p>-->

        <div class="sidebartextleftsmall"> 
      Restore Facility<br/>
      200 South Larkin<br/>
          Joliet, IL. 60436<br/>
          P: 815-714-7100<br/>
          E: info@restorejoliet.org
        </div>
    </div>
<!--</div>-->
    <div id="sidebarright">
        <div class="sidebartextright">
            <p>FEATURED THIS WEEK:</p>
        </div>
        <div class="rightsidebarimg">
            <div class="featuredimg">
                <img src="images/furniture for sale.jpg" width="265" height="457" alt="furniture for sale">
        </div>
      </div>
      <div class="sidebartextrightsmall"><span>Save our contact info to your smartphone</span>
            <img src="images/scancode.jpg" width="125" height="126" alt="Habitat Restore Contact Information Smartphone Code">
      </div>
    </div>
    <div id="content">
    <div id="captioned-gallery">
      <figure class="slider">
        <figure>
          <img src="images/restorelocationtext.png" alt="Will County Habitat For Restore Location">
        </figure>
        <figure>
          <img src="images/slider2.jpg" alt="Worker setting up bookshelf">
        </figure>
        <figure>
          <img src="images/slider3.jpg" alt="Warehouse selection">
        </figure>
        <figure>
          <img src="images/slider4.JPG" alt="More Ware Selection Tables and fans">
        </figure>
        <figure>
          <img src="images/slider5.JPG" alt="Household furniture warehouse selection">
        </figure>
      </figure>
    </div>
        <div id="box">
            <img src="images/habitatBox1.png" alt="Shop for repurposed materials" class="center" /> 
      <img src="images/habitatBox2.png" alt="Donate Heart" class="center" />
      <img src="images/habitatBox3.png" alt="Shop for repurposed materials" class="center" />
        </div>
    </div>
    <div id="sidebarbottom">
    <ul class="sidebartextleft">
        <li class="pleftsidebar"><a href="#">ABOUT US</a></li>
        <li class="pleftsidebar"><a href="#">REPURPOSED</a></li>
        <li class="pleftsidebar"><a href="#">DONATE</a></li>
        <li class="pleftsidebar"><a href="#">VOLUNTEER</a></li>
        <li class="pleftsidebar"><a href="#">UNITED WAY</a></li>
        <li class="pleftsidebar"><a href="#">NEWSLETTER</a></li>
        <li class="pleftsidebar"><a href="#">EMAIL US</a></li>
        <li class="pleftsidebar"><a href="#">SEND US PHOTOS</a></li>
        <li class="pleftsidebar"><a href="#">MAP TO RESTORE</a></li>
        <li class="pleftsidebar"><a href="#">DIRECTIONS</a></li>
    </ul>
</div>
    <div id="footer">2015 Will County Habitat for Humanity ReStore. All Rights Reserved.</div>
</div>
</body>
</html>

我有一个问题，我的内容部分在到达页脚之前突然停止导致黑色衬垫出现，我已经考虑编辑内容容器的包装大小和高度但是无法计算问题可能是什么，请帮帮我 This below image is what the page is complete page should look like

CSS

@media only screen and (min-width: 960px) {
* {
    padding: 0px;
    margin: 0px;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
header {
    height: 106px;
    background-color: #d9e6ef;
}
#wrapper {
    width: 100%; 
}
#nav {
    height: 52px; 
    background-color: #51b948;
}
#nav ul {
    padding: 7px;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    color: #FFF;
}
#nav ul li {
    display: inline-block;
    list-style-type: none; 
    margin: 0 15px;
}
#nav ul li a {
    display: inline-block;
    text-align: center;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    color: #F4E9E9;
    text-decoration: none;
    background-color: #406718;
    padding: 5px;
    border: thin solid #030303;
    width: 170px;
}
.socialmedia {
    float: right;
    margin-right: 45px; 
    padding: 8px 8px 0;
}


a {
    text-decoration: none;
}
a:visited {
    color:#FFF !important; 
}

#sidebarleft {
    float: left;
    width: 20%;
    height: 784px; 
    background-color: #005596;
}
#sidebarright {
    float: right;
    width: 20%;
    height: 784px; 
    background-color: #005596;
}
#sidebarbottom {
    display: none;
}
.sidebartextleft {
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 30px;
    margin-left: 25px;
    font-size: 20px;
    color: #FFF;
    font-weight: bolder;
    height: 368px;
    font-style: normal;
}
.sidebartextright {
    position: relative; 
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px 0 20px 5px;
    text-align: center; 
    color: #FFF;
    font-weight: bold;
    font-size: 20px; 
    height: 30px;
    font-style: normal;
}
.sidebartextlefthead {
    font-family: Arial, Helvetica, sans-serif;
    font-style: bold; 
    font-size: 22px; 
    padding-bottom: 20px;
    font-weight: bold;
}

.pleftsidebar {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #d5b89a;
    padding-top: 4px;
    padding-bottom: 3px;
    width: 80%
}

#content {
    width: 60%;
    height: 768px;
    float: left;
}

#footer {
    width: 100%;
    padding-top: 10px;
    bottom: 0;
    text-align: center;
    background-color: #dbf1da;
    font-weight: bold;
    color: #000;
}

.rightsidebarimg {
    text-align: center;
    padding: 0 15px;
}

.sidebartextrightsmall {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center; 
    color: #FFF;
    font-size: 20px; 
    width: 90%;
    height: 200px;
    font-style: normal;
    margin: 60px auto 0;
}
.sidebartextrightsmall span {
    display: block;
    padding-bottom: 20px;
}
.sidebartextrightsmall img {
    max-width: 125px;
    height: auto;
    text-align: center;

}

.sidebartextleftsmall {
    margin: 200px 1px 0;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: #c7b199;
    font-size: 17px;
    font-weight: normal;
    width: 100%;
    height: auto;
    font-style: normal;
}
.featuredimg img {
    width: 100%;
    height: auto;
}
#box {
    text-align: center;

}
img.center {
    display: inline-block;
    width: 30%;
    padding: 0 8px;
}
.headimg {
    height: 106px;
    margin-left: 100px; 
    display: inline-block; 
    background: url(images/head.png) no-repeat;
}

h2.slogan1 {
    padding: 53px 0 0 220px ;
    font-weight: bold;
    font-size: 24px;
}
h3.slogan2 {
    padding-left: 220px ;
    font-style: italic;
    font-weight: bold;
    font-size: 20px;    
}






@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure { 
    margin: 0; 
    background: #101010;
}
div#captioned-gallery { 
    width: 90%; 
    overflow: hidden; 
    border:5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    margin: 40px auto; 
}
figure.slider { 
    position: relative;
    width: 500%;
    font-size: 0; 
    animation: 30s slidy infinite; 
}
figure.slider figure { 
    width: 20%; 
    height: auto;
    display: inline-block;  
    position: inherit; 
}
figure.slider img { 
    width: 100%;
    height: auto; 
}
figure.slider figure figcaption { 
    position: absolute; 
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #fff; 
    width: 100%;
    padding: .6rem; 
}

/* Bracket below closes desktop media query */
}





























@media only screen and (min-width: 768px) and (max-width: 959px) {
* {
    padding: 0px;
    margin: 0px;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
header {
    height: 106px;
    background-color: #d9e6ef;
}
#wrapper {
    width: 100%;
}
#header {
    height: 106px;
    background-color: #d9e6ef;
}
#nav {
    height: 52px; 
    background-color: #51b948;
}
#nav ul {
    padding: 9px;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: bold;
    color: #FFF;
}
#nav ul li {
    display: inline-block;
    list-style-type: none; 
    margin: 0 15px;
}
#nav ul li a {
    display: inline-block;
    text-align: center;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    color: #F4E9E9;
    text-decoration: none;
    background-color: #406718;
    padding: 5px;
    border: thin solid #030303;
    width: 140px;
}
.socialmedia {
    float: right;
    margin-right: 45px; 
    padding: 8px 8px 0;
}



#sidebarleft {
    float: left;
    width: 25%;
    height: 784px; 
    background-color: #005596;
}
#sidebarright {
    display: none;
}
#sidebarbottom {
    display: none;
}
.sidebartextleft {
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 30px;
    margin-left: 25px;
    font-size: 20px;
    color: #FFF;
    font-weight: bolder;
    height: 368px;
    font-style: normal;
}
.sidebartextright {
    position: relative; 
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px 0 20px 5px;
    text-align: center; 
    color: #FFF;
    font-weight: bold;
    font-size: 20px; 
    height: 30px;
    font-style: normal;
}
.sidebartextlefthead {
    font-family: Arial, Helvetica, sans-serif;
    font-style: bold; 
    font-size: 22px; 
    padding-bottom: 20px;
    font-weight: bold;
}

.pleftsidebar {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #d5b89a;
    padding-top: 4px;
    padding-bottom: 3px;
    width: 80%
}

#content {
    width: 75%;
    height: 768px;
    float: left;
}

#footer {
    width: 100%;
    padding-top: 10px;
    bottom: 0;
    text-align: center;
    background-color: #dbf1da;
    font-weight: bold;
    color: #000;
}

.rightsidebarimg {
    text-align: center;
    padding: 0 15px;
}

.sidebartextrightsmall {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center; 
    color: #FFF;
    font-size: 20px; 
    width: 90%;
    height: 200px;
    font-style: normal;
    margin: 60px auto 0;
}
.sidebartextrightsmall span {
    display: block;
    padding-bottom: 20px;
}
.sidebartextrightsmall img {
    max-width: 125px;
    height: auto;
    text-align: center;

}

.sidebartextleftsmall {
    margin: 200px 1px 0;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: #c7b199;
    font-size: 17px;
    font-weight: normal;
    width: 100%;
    height: auto;
    font-style: normal;
}
.featuredimg img {
    width: 100%;
    height: auto;
}


#box {
    text-align: center;

}
img.center {
    display: inline-block;
    width: 30%;
    padding: 0 8px;
}
.headimg {
    height: 106px;
    margin-left: 40px;
    background: url(images/head.png) no-repeat;
}

h2.slogan1 {
    padding: 53px 0 0 220px ;
    font-weight: bold;
    font-size: 22px;
}
h3.slogan2 {
    padding-left: 220px ;
    font-style: italic;
    font-weight: bold;
    font-size: 18px;    
}






@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure { 
    margin: 0; 
    background: #101010;
}
div#captioned-gallery { 
    width: 90%; 
    overflow: hidden; 
    border:5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    margin: 40px auto; 
}
figure.slider { 
    position: relative;
    width: 500%;
    font-size: 0; 
    animation: 30s slidy infinite; 
}
figure.slider figure { 
    width: 20%; 
    height: auto;
    display: inline-block;  
    position: inherit; 
}
figure.slider img { 
    width: 100%;
    height: auto; 
}
figure.slider figure figcaption { 
    position: absolute; 
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #fff; 
    width: 100%;
    padding: .6rem; 
}

/* Bracket below closes tablet media query */
}






























@media only screen and (min-width: 320px) and (max-width: 767px) {
* {
    padding: 0px;
    margin: 0px;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
header {
    height: 106px;
    background-color: #d9e6ef;
}
#wrapper {
    width: 100%;
}
#nav {
    background-color: #51b948;
}
#nav ul {
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: bold;
    color: #FFF;
}
#nav ul li {
    display: block;
    list-style-type: none; 
    border-bottom: 2px dotted white;
}
#nav ul li:last-child {
    border-bottom: none;
}
#nav ul li a {
    display: block;
    text-align: center;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    color: #F4E9E9;
    padding: 20px;
}
#nav ul li a:link {
    text-decoration: none;

}
#nav ul li a:visited {
    color: #F4E9E9;
}
#nav ul li a:hover {
    background: #51b948;
}
#nav ul li a:active {
    background: #406718;
}
.socialmedia {
    float: right;
    margin-right: 45px; 
    padding: 8px 8px 0;
}



#sidebarleft {
    display: none;
    float: left;
    width: 25%;
    height: 784px; 
    background: #005596;
}
#sidebarright {
    display: none;
}
#sidebarbottom {
    width: 100%;
    background: #005596;
    text-align: center;
}
#sidebarbottom ul li a {
    display: block;
    padding: 15px;
    border-bottom: 3px solid #fff;
}
#sidebarbottom ul li a:link {
    text-decoration: none;
}
#sidebarbottom ul li a:visited {
    color: #fff;
}
#sidebarbottom ul li a:hover {
    background: #005596;
}
#sidebarbottom ul li a:active {
    background: #d9e6ef;
}
.sidebartextleft {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFF;
    font-weight: bolder;
    font-style: normal;
}
.sidebartextright {
    position: relative; 
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px 0 20px 5px;
    text-align: center; 
    color: #FFF;
    font-weight: bold;
    font-size: 20px; 
    height: 30px;
    font-style: normal;
}
.sidebartextlefthead {
    font-family: Arial, Helvetica, sans-serif;
    font-style: bold; 
    font-size: 22px; 
    padding-bottom: 20px;
    font-weight: bold;
}
#content {
    width: 100%;
    background: #dbf1da;
    padding: 0;
    margin: 0;
}

#footer {
    width: 100%;
    padding-top: 10px;
    bottom: 0;
    text-align: center;
    background-color: #dbf1da;
    font-weight: bold;
    color: #000;
}

.rightsidebarimg {
    text-align: center;
    padding: 0 15px;
}

.sidebartextrightsmall {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center; 
    color: #FFF;
    font-size: 20px; 
    width: 90%;
    height: 200px;
    font-style: normal;
    margin: 60px auto 0;
}
.sidebartextrightsmall span {
    display: block;
    padding-bottom: 20px;
}
.sidebartextrightsmall img {
    max-width: 125px;
    height: auto;
    text-align: center;

}

.sidebartextleftsmall {
    margin: 200px 1px 0;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: #c7b199;
    font-size: 17px;
    font-weight: normal;
    width: 100%;
    height: auto;
    font-style: normal;
}
.featuredimg img {
    width: 100%;
    height: auto;
}


#box {
    text-align: center;
}
img.center {
    display: inline-block;
    width: 33%;
    margin: 0;
    background: #42603C;

}
img.center:first-child {
    float: left;
}
img.center:last-child {
    float: right;
}
.headimg {
    height: 106px;
    margin: 0 auto;
    padding: 0 auto;
    text-align: center;
    background: url(images/head.png) no-repeat center;
}

h2.slogan1 {
    display: none;
    /*
    padding: 35px 0 0 220px ;
    font-weight: bold;
    font-size: 20px;
    */
}
h3.slogan2 {
    display: none;
    /*
    padding-left: 220px ;
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    */
}






@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure { 
    margin: 0; 
    background: #101010;
}

div#captioned-gallery { 
    width: 100%; 
    overflow: hidden; 
    margin: 0 auto; 
}
figure.slider { 
    position: relative;
    width: 500%;
    font-size: 0; 
    animation: 30s slidy infinite; 
}
figure.slider figure { 
    width: 20%; 
    height: auto;
    display: inline-block;  
    position: inherit; 
}
figure.slider img { 
    width: 100%;
    height: auto; 
}
figure.slider figure figcaption { 
    position: absolute; 
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #fff; 
    width: 100%;
    padding: .6rem; 
}

/* Bracket below closes phone media query */
}

Answer 1

您正在关闭一个div，然后打开div（标签）。计算它们然后看，哪个div应该在哪个点关闭。例如，您可以搜索所有div>以获取所有打开和关闭div标签。一个提示：看看浏览器中的源代码，至少Firefox强调错误的html语法（太manny或少数标签或不匹配的标签），这使得它们很容易找到。

修改您在此div <div id="box">....</div>

之后关闭了内容div

为什么我的内容区域在我的页脚之前停止？

1 个答案: