实际上我得到了这个项目设置的页面布局。在最后一张div卡被接受后，有一个很大的白色差距。滚动下来是一个很大的空白差距。我认为它可能是一个保证金问题，但无法确定在哪里。如何在不影响布局的情况下消除这个大差距的任何想法。这是代码
body {
background: rgba(117, 112, 112, 0.06);
}
.main-container {
width: 960px;
margin: auto;
position: relative;
background-color: white;
}
.headercontainer {
margin-top: 20px;
background-color: #ddf5ce;
}
.topfiller {
background-image: url("../Images/Aztec2white.jpg");
background-repeat: repeat-x;
}
img.RestLogo {
position: relative;
left: 7px;
}
.btmfiller {
background-image: url("../Images/Aztec2white.jpg");
background-repeat: repeat-x;
margin-bottom: -5px;
}
.pic-filler {
margin-top: -25px;
}
#pic-filler {
display: block;
margin-left: auto;
margin-right: auto;
}
#mainMotto {
font-family: 'Rock Salt', cursive;
color: rgba(11, 123, 40, 0.86);
font-size: 110%;
letter-spacing: -1.5px;
position: absolute;
top: 35px;
left: 290px;
}
.headercontact p {
display: block;
position: absolute;
top: 30px;
left: 780px;
line-height: 60%;
font-family: 'Frank Ruhl Libre', sans-serif;
font-size: 87%;
color: brown;
}
.headercontact span {
font-weight: bold;
font-size: 130%;
}
.headercontact a {
text-decoration: none;
font-family: 'Frank Ruhl Libre', sans-serif;
color: #921f0c;
}
.headerschedule {
display: block;
position: absolute;
left: 325px;
top: 120px;
}
.headerschedule p {
line-height: 70%;
font-size: 20px;
color: #0B3504;
font-size: 95%;
font-weight: 600;
}
/*social media icons*/
.socialmedia {
position: absolute;
top: 145px;
left: 800px;
letter-spacing: 2px;
}
.socialmedia a {
display: inline-block;
}
/*Navigation Menu*/
.navigationbar {
margin: 0px;
border-top: 1px solid rgba(106, 180, 83, 0.82);
}
.navigationbar ul {
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
.navigationbar li {
display: inline-block;
margin-top: 10px;
list-style: none;
margin-right: 15px;
padding: 10px 15px;
font-family: 'Indie Flower', cursive;
font-size: 120%;
text-transform: uppercase;
background-color: #e0ecd2;
border: 2px solid rgba(106, 180, 83, 0.82);
border-radius: 16px;
}
.navigationbar a {
display: block;
color: #928c1e;
text-decoration: none;
}
nav li:hover {
background: #d0edaf;
}
@media screen and (max-width: 700px) {
.navigationbar li {
width: 50%;
}
}
/*End of Navigation Menu*/
/*Body content*/
.bodytxtcontent {
padding-left: 20px;
padding-right: 20px;
text-align: justify;
}
.body-paragraph {
max-width: 100%;
background-repeat: no-repeat;
background-size: 100%;
font-family: 'Cormorant Upright', serif;
font-size: 150%;
line-height: 130%;
color: rgba(38, 150, 44, 0.9);
font-weight: bold;
}
.bodyimg {
max-width: 45%;
box-sizing: border-box;
float: right;
margin: 7px 0 0 15px;
}
/*Not showing next to body-paragraph*/
#cantinapic {
max-width: 100%;
height: auto;
}
/*end of body content*/
/*Table content*/
.tablecontainer {
background-image: url(../Images/Tacos-de-Barbacoa1.png);
background-repeat: no-repeat;
background-size: cover;
}
table {
border-spacing: 0;
border-collapse: collapse;
margin-top: 25px;
width: 100%;
}
table td {
padding: 10px;
border: 2px solid green;
font-size: 18px;
color: #11100f;
text-align: center;
}
tr .items-header {
font-weight: bold;
text-align: right;
font-size: 22px;
padding: 10px;
}
/*End of Table content*/
/*Contact Us*/
form {
background-color: #efe9e9;
padding-top: 15px;
padding-left: 15px;
padding-bottom: 15px;
border-radius: 7px;
}
.First-Half {
width: 60%;
float: left;
margin-top: 30px;
}
.First-Half h2 {
color: #2f2fa5;
text-align: center;
margin-right: 20px;
}
address {
line-height: 75%;
font-size: 20px;
text-align: center;
}
.First-Half p {
text-align: center;
font-size: 20px;
font-style: italic;
}
.First-Half a {
text-decoration: none;
margin-left: 12em;
font-size: 17px;
font-style: italic;
}
iframe {
margin-top: 10px;
margin-left: 5em;
box-shadow: 10px 10px 5px #aaaaaa;
border-radius: 5px;
}
table .table-schedule td {
text-align: left;
border: none;
}
.days {
width: 25%;
font-weight: bolder;
}
.time {
width: 75%;
}
.Second-Half {
width: 35%;
float: left;
margin-top: 30px;
}
.Second-Half h3 {
color: #443c3e;
line-height: 87%;
}
label {
font-family: 'Frank Ruhl Libre', sans-serif;
}
.hidden-label {
position: absolute;
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
}
input[type="text"],
input[type="tel"],
input[type="email"] {
display: block;
box-sizing: border-box;
margin: 10px;
padding: 10px 10px;
font-family: 'Frank Ruhl Libre', sans-serif;
font-size: 100%;
border: 1px solid #CDCDCD;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
border: 1px solid #CDCDCD;
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}
input[type="submit"] {
display: block;
width: 60%;
box-sizing: border-box;
margin: 10px;
padding-top: 7px;
padding-bottom: 7px;
background-color: #9b8181;
border: 1px solid #9b8181;
border-radius: 3px;
font-family: 'Frank Ruhl Libre', sans-serif;
font-size: 100%;
}
input[type="submit"]:focus,
input[type="submit"]:hover {
border: 1px solid #CDCDCD;
background-color: rgba(155, 129, 129, 0.84)
}
textarea {
display: block;
box-sizing: border-box;
margin: 10px;
border: 1px solid #CDCDCD;
border-radius: 3px;
}
textarea:focus {
border: 1px solid #CDCDCD;
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}
/*End of Contact Us*/
/*footer section*/
#footer {
width: 960px;
margin-top: 100%;
padding: 5px;
text-align: center;
font-size: 18px;
background-color: #e6f9da;
}
.cardsaccepted {
width: 725px;
margin: 10px 15px;
}
#copyright {
margin-left: auto;
margin-right: auto;
text-align: center;
color: #9c9898;
}
#cards-accepted {
max-width: 35%;
height: auto;
}
.cards-paragraph p {
font-family: 'Frank Ruhl Libre', sans-serif;
font-size: 85%;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Taqueria El Perico Loco</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Upright" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<div class="main-container">
<div class="headercontainer">
<div class="topfiller">
<img src="Images/Aztec2white.jpg">
<!--Needs to be background img and repeat x-->
</div>
<!--end of topfiller div-->
<a href="index.html"><img class="RestLogo" src="Images/Pericos-Restaurant.jpg" alt="El Perico Loco" width="135" height="auto"></a>
<div class="restaurantmotto">
<h1 id="mainMotto">Authentic Mexican Food with Tradition</h1>
</div>
<!--end of restaurantmotto-->
<div class="headercontact">
<p><span>Come visit us at</span>
<br></br>
150 Coronado Ave
<br></br>
Daly City, CA 94051
<br></br>
650.758.1000
<br></br>
<a href="mailto:info@elpericoloco.com">info@elpericoloco.com</a></p>
</div>
<!--end of headercontact-->
<div class="headerschedule">
<p>Sundays thru Thursdays: 11am - 11pm
<br></br>
Fridays & Saturdays: 11am to midnight</p>
</div>
<!--end of headerschedule-->
<div class="socialmedia">
<a href="http://www.facebook.com"><img src="Images/apple-touch-icon-precomposed.png" width="30" height="30"></a>
<a href="http://www.twitter.com"><img src="Images/Twitter_icon.png" width="30" height="30"></a>
<a href="http://www.google.com"><img src="Images/GooglePlus-logos-02.png" width="30" height="30"></a>
</div>
<!--end of div social media-->
<div class="btmfiller">
<img src="Images/Aztec2white.jpg">
<!--Needs to be background img and repeat x-->
</div>
<!--end of btmfiller div-->
</div>
<!--end of headercontainer div-->
<nav class="navigationbar">
<ul class="group">
<li><a href="index.html">Home</a></li>
<li><a href="Menu.html">Menu</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
<div class="bodytxtcontent">
<br></br>
<h3></h3>
<div class="pic-filler">
<img id="pic-filler" src="Images/static1.squarespace.com.png" alt="pic filler">
</div>
<!--end of pic-filler div-->
<div class="body-paragraph">
<div class="bodyimg">
<img id="cantinapic" src="Images/cantinabqt.jpg" alt="Inside Restaurant">
</div>
<!--end of bodyimg div-->
<p>Growing up in La Estancia de Los Lopez, Nayarit Mexico and being the oldest of seven, I gravitate to one of the family businesses. My father's love of butchering and breaking down carcass, turn into a taco stand in front of our house. Being my
father's apprentice, I would rush home from school to cook all our meats and learn his cooking skills. Although, I loved learning new cooking skills the best part of it, was spending one on one time with my father.</p>
<p>As I spent more and more time in the kitchen, I began to realize how much flavor meant to me. I found myself many times creating new recipes that one day I dreamed of putting out in my restaurant. A dream that for many years seemed surreal, until
I meet my wife who helped develop the menu that has made us who we are today in the restaurant industry.</p>
<p>We started in 1999 as a street vendor on East 14th and 42nd in Oakland and progressively brought our Mexican flavors to our home town in San Leandro in 2007.</p>
</div>
<!--end of body-paragraph-->
</div>
<!--End of bodytxtcontent-->
<div class="cardsaccepted">
<img id="cards-accepted" src="Images/all cards accepted.jpg" alt="Cards Accepted image">
<div class="cards-paragraph">
<p>We proudly accept this cards. No Minimum!</p>
</div>
<!--end of cards-paragraph-->
</div>
<!--end of cardsacceped div. It wraps img cards id=cards-acepted and cards-paragraph -->
<footer id="footer">
<span id="copyright"> ©All Rights Reserved 2016</span>
</footer>
</div>
<!--End of main-container div-->
</body>
</html>
答案 0 :(得分：1)
只需从margin-top: 100%移除#footer。
为什么你还需要这个保证金呢？
答案 1 :(得分：0)
您的页脚有一个margin-top: 100%，这会导致空白区域。删除它，空间将消失。
我想你想要像
这样的东西#footer {
position: fixed;
bottom: 0;
}
或类似。
答案 2 :(得分：0)
调试这样的显示问题的简单方法是：
答案 3 :(得分：0)
您可能想要重置某些边距效果。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
您可以将页脚设置在底部的固定位置或绝对位置。关闭流程，您需要在最后一个元素中添加一些空格（填充或边距）以避免页脚重叠。
示例：
body {
background: rgba(117, 112, 112, 0.06);
margin:0
}
.main-container {
width: 960px;
margin: auto;
position: relative;
background-color: white;
padding-top:20px;
}
.headercontainer {
/*margin-top: 20px;*/
background-color: #ddf5ce;
}
.topfiller {
background-image: url("../Images/Aztec2white.jpg");
background-repeat: repeat-x;
}
img.RestLogo {
position: relative;
left: 7px;
}
.btmfiller {
background-image: url("../Images/Aztec2white.jpg");
background-repeat: repeat-x;
margin-bottom: -5px;
}
.pic-filler {
margin-top: -25px;
}
#pic-filler {
display: block;
margin-left: auto;
margin-right: auto;
}
#mainMotto {
font-family: 'Rock Salt', cursive;
color: rgba(11, 123, 40, 0.86);
font-size: 110%;
letter-spacing: -1.5px;
position: absolute;
top: 35px;
left: 290px;
margin:0
}
.headercontact p {
display: block;
position: absolute;
top: 30px;
left: 780px;
line-height: 60%;
font-family: 'Frank Ruhl Libre', sans-serif;
font-size: 87%;
color: brown;
}
.headercontact span {
font-weight: bold;
font-size: 130%;
}
.headercontact a {
text-decoration: none;
font-family: 'Frank Ruhl Libre', sans-serif;
color: #921f0c;
}
.headerschedule {
display: block;
position: absolute;
left: 325px;
top: 120px;
}
.headerschedule p {
line-height: 70%;
font-size: 20px;
color: #0B3504;
font-size: 95%;
font-weight: 600;
}
/*social media icons*/
.socialmedia {
position: absolute;
top: 145px;
left: 800px;
letter-spacing: 2px;
}
.socialmedia a {
display: inline-block;
}
/*Navigation Menu*/
.navigationbar {
margin: 0px;
border-top: 1px solid rgba(106, 180, 83, 0.82);
}
.navigationbar ul {
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
.navigationbar li {
display: inline-block;
margin-top: 10px;
list-style: none;
margin-right: 15px;
padding: 10px 15px;
font-family: 'Indie Flower', cursive;
font-size: 120%;
text-transform: uppercase;
background-color: #e0ecd2;
border: 2px solid rgba(106, 180, 83, 0.82);
border-radius: 16px;
}
.navigationbar a {
display: block;
color: #928c1e;
text-decoration: none;
}
nav li:hover {
background: #d0edaf;
}
@media screen and (max-width: 700px) {
.navigationbar li {
width: 50%;
}
}
/*End of Navigation Menu*/
/*Body content*/
.bodytxtcontent {
padding-left: 20px;
padding-right: 20px;
text-align: justify;
}
.body-paragraph {
max-width: 100%;
background-repeat: no-repeat;
background-size: 100%;
font-family: 'Cormorant Upright', serif;
font-size: 150%;
line-height: 130%;
color: rgba(38, 150, 44, 0.9);
font-weight: bold;
}
.bodyimg {
max-width: 45%;
box-sizing: border-box;
float: right;
margin: 7px 0 0 15px;
}
/*Not showing next to body-paragraph*/
#cantinapic {
max-width: 100%;
height: auto;
}
/*end of body content*/
/*Table content*/
.tablecontainer {
background-image: url(../Images/Tacos-de-Barbacoa1.png);
background-repeat: no-repeat;
background-size: cover;
}
table {
border-spacing: 0;
border-collapse: collapse;
margin-top: 25px;
width: 100%;
}
table td {
padding: 10px;
border: 2px solid green;
font-size: 18px;
color: #11100f;
text-align: center;
}
tr .items-header {
font-weight: bold;
text-align: right;
font-size: 22px;
padding: 10px;
}
/*End of Table content*/
/*Contact Us*/
form {
background-color: #efe9e9;
padding-top: 15px;
padding-left: 15px;
padding-bottom: 15px;
border-radius: 7px;
}
.First-Half {
width: 60%;
float: left;
margin-top: 30px;
}
.First-Half h2 {
color: #2f2fa5;
text-align: center;
margin-right: 20px;
}
address {
line-height: 75%;
font-size: 20px;
text-align: center;
}
.First-Half p {
text-align: center;
font-size: 20px;
font-style: italic;
}
.First-Half a {
text-decoration: none;
margin-left: 12em;
font-size: 17px;
font-style: italic;
}
iframe {
margin-top: 10px;
margin-left: 5em;
box-shadow: 10px 10px 5px #aaaaaa;
border-radius: 5px;
}
table .table-schedule td {
text-align: left;
border: none;
}
.days {
width: 25%;
font-weight: bolder;
}
.time {
width: 75%;
}
.Second-Half {
width: 35%;
float: left;
margin-top: 30px;
}
.Second-Half h3 {
color: #443c3e;
line-height: 87%;
}
label {
font-family: 'Frank Ruhl Libre', sans-serif;
}
.hidden-label {
position: absolute;
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
}
input[type="text"],
input[type="tel"],
input[type="email"] {
display: block;
box-sizing: border-box;
margin: 10px;
padding: 10px 10px;
font-family: 'Frank Ruhl Libre', sans-serif;
font-size: 100%;
border: 1px solid #CDCDCD;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
border: 1px solid #CDCDCD;
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}
input[type="submit"] {
display: block;
width: 60%;
box-sizing: border-box;
margin: 10px;
padding-top: 7px;
padding-bottom: 7px;
background-color: #9b8181;
border: 1px solid #9b8181;
border-radius: 3px;
font-family: 'Frank Ruhl Libre', sans-serif;
font-size: 100%;
}
input[type="submit"]:focus,
input[type="submit"]:hover {
border: 1px solid #CDCDCD;
background-color: rgba(155, 129, 129, 0.84)
}
textarea {
display: block;
box-sizing: border-box;
margin: 10px;
border: 1px solid #CDCDCD;
border-radius: 3px;
}
textarea:focus {
border: 1px solid #CDCDCD;
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}
/*End of Contact Us*/
/*footer section*/
#footer {
position:fixed;
width: 960px;
/*margin-top: 100%;*/
bottom:0;
padding: 5px;
text-align: center;
font-size: 18px;
background-color: #e6f9da;
}
.cardsaccepted {
width: 725px;
margin: 10px 15px 50px;
}
#copyright {
margin-left: auto;
margin-right: auto;
text-align: center;
color: #9c9898;
}
#cards-accepted {
max-width: 35%;
height: auto;
}
.cards-paragraph p {
font-family: 'Frank Ruhl Libre', sans-serif;
font-size: 85%;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Taqueria El Perico Loco</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Upright" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<div class="main-container">
<div class="headercontainer">
<div class="topfiller">
<img src="Images/Aztec2white.jpg">
<!--Needs to be background img and repeat x-->
</div>
<!--end of topfiller div-->
<a href="index.html"><img class="RestLogo" src="Images/Pericos-Restaurant.jpg" alt="El Perico Loco" width="135" height="auto"></a>
<div class="restaurantmotto">
<h1 id="mainMotto">Authentic Mexican Food with Tradition</h1>
</div>
<!--end of restaurantmotto-->
<div class="headercontact">
<p><span>Come visit us at</span>
<br></br>
150 Coronado Ave
<br></br>
Daly City, CA 94051
<br></br>
650.758.1000
<br></br>
<a href="mailto:info@elpericoloco.com">info@elpericoloco.com</a></p>
</div>
<!--end of headercontact-->
<div class="headerschedule">
<p>Sundays thru Thursdays: 11am - 11pm
<br></br>
Fridays & Saturdays: 11am to midnight</p>
</div>
<!--end of headerschedule-->
<div class="socialmedia">
<a href="http://www.facebook.com"><img src="Images/apple-touch-icon-precomposed.png" width="30" height="30"></a>
<a href="http://www.twitter.com"><img src="Images/Twitter_icon.png" width="30" height="30"></a>
<a href="http://www.google.com"><img src="Images/GooglePlus-logos-02.png" width="30" height="30"></a>
</div>
<!--end of div social media-->
<div class="btmfiller">
<img src="Images/Aztec2white.jpg">
<!--Needs to be background img and repeat x-->
</div>
<!--end of btmfiller div-->
</div>
<!--end of headercontainer div-->
<nav class="navigationbar">
<ul class="group">
<li><a href="index.html">Home</a></li>
<li><a href="Menu.html">Menu</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
<div class="bodytxtcontent">
<br></br>
<h3></h3>
<div class="pic-filler">
<img id="pic-filler" src="Images/static1.squarespace.com.png" alt="pic filler">
</div>
<!--end of pic-filler div-->
<div class="body-paragraph">
<div class="bodyimg">
<img id="cantinapic" src="Images/cantinabqt.jpg" alt="Inside Restaurant">
</div>
<!--end of bodyimg div-->
<p>Growing up in La Estancia de Los Lopez, Nayarit Mexico and being the oldest of seven, I gravitate to one of the family businesses. My father's love of butchering and breaking down carcass, turn into a taco stand in front of our house. Being my
father's apprentice, I would rush home from school to cook all our meats and learn his cooking skills. Although, I loved learning new cooking skills the best part of it, was spending one on one time with my father.</p>
<p>As I spent more and more time in the kitchen, I began to realize how much flavor meant to me. I found myself many times creating new recipes that one day I dreamed of putting out in my restaurant. A dream that for many years seemed surreal, until
I meet my wife who helped develop the menu that has made us who we are today in the restaurant industry.</p>
<p>We started in 1999 as a street vendor on East 14th and 42nd in Oakland and progressively brought our Mexican flavors to our home town in San Leandro in 2007.</p>
</div>
<!--end of body-paragraph-->
</div>
<!--End of bodytxtcontent-->
<div class="cardsaccepted">
<img id="cards-accepted" src="Images/all cards accepted.jpg" alt="Cards Accepted image">
<div class="cards-paragraph">
<p>We proudly accept this cards. No Minimum!</p>
</div>
<!--end of cards-paragraph-->
</div>
<!--end of cardsacceped div. It wraps img cards id=cards-acepted and cards-paragraph -->
<footer id="footer">
<span id="copyright"> ©All Rights Reserved 2016</span>
</footer>
</div>
<!--End of main-container div-->
</body>
</html>