0
我有一个很大的白色空格，它将我的最后一个div放到页面底部。我不想将页面延长很远，这就是我正在构建的页面（www.theoriginalbeng.com）。笨重和DIV：4个球我最后两个div之间的空白区域
我的HTML是：
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title> TJ Sports </title>
</head>
<body>
<div class="content">
<div class = "title">
<div class="container">
<a href = "http://www.theoriginalbeng.com"> TOEJAM SPORTS </a>
<p>Be The Best: On and Off the Field</p>
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Search</a></li>
</ul>
</div>
</div>
<div class="bulky">
<div class="Container">
<p>Give it some sort of inspiring text to make a purchase here</p>
<a href="#" class="button">Buy</a>
<a href="#" class="button">Sell</a>
</div>
</div>
<div class="4 Balls">
<div class="Container">
<img src="/Balls/Baseball.jpeg">
<img src="/Balls/basketball.jpeg">
<img src="/Balls/americanFootball.jpeg">
<img src="/Balls/Puck.jpeg">
</div>
</div>
<div class="footer">
Copyright © theoriginalbeng.com
</div>
</div>
</body>
</html>
我的CSS是：
.content {
width: 80%;
margin: 0 auto;
}
.title {
text-align: center;
font-weight: bold;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
background-image: url('http://www.fantasyspecialist.com/wp-content/uploads/2010/05/fantasy-football-email.jpg');
background-size: 100% auto;
}
.title a {
color: #3399ff;
font-size: 100px;
text-decoration: none;
}
.nav ul {
list-style-type: none; /* Removes bullet Points */
margin: 0; /*this and padding below even up everything and moves away from default settings. Somestimes no difference is noticed*/
padding: 0; /*this and margin above even up everything*/
overflow: hidden; /*this hides the rectangle box. Everything in css or html comes in a rectangular box */
background-color: #333;
}
.nav ul li {
float: left; /*This puts all ul li items in a line */
}
.nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.bulky {
background-image: url('Sidelines.jpeg');
background-size: 100% auto;
height: 6000px; /* stretches image downwards*/
background-repeat: no-repeat;
/*padding-top: 14px; */ /* All paddings add to point that there will be no white spacing between this image and the nav bar */
/*padding-bottom: 14px;*/
/*padding-left: 10px;*/
/*padding-right: 10px;*/
/*margin:0; */
/*padding:0;*/
color: white;
}
.bulky ul li {
float: left; /*This puts all ul li items in a line */
margin: 0; /*this and padding below even up everything and moves away from default settings. Somestimes no difference is noticed*/
padding: 14px 16px; /*this and margin above even up everything*/
overflow: hidden; /*this hides the rectangle box. Everything in css or html comes in a rectangular box */
}
.button {
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.button:hover {
background-color:#5cbf2a;
}
.button:active {
position:relative;
top:1px;
}
.4 Balls {
float: right;
}
.footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
任何帮助将是宏伟
我不确定你在问什么。 – Draco18s
附上它是什么和你想要的东西的截图可能是一个好主意。 – miqdadamirali
谢谢。原来，我把背景的图像拉伸到了6000，如果我把它减少到500，它就给了我更接近我要找的东西。 –