出于某种原因,蓝色 div 比页面的“结束”更远,并且我得到了一个垂直滚动条。显然我不应该。有任何想法吗?HTML:
<!DOCTYPE html>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="body">
<div id="wrap">
<!--header starts-->
<div id="header">
<div id="name">
<h1>Comp <span>any</span> Name</h1>
</div><!--end name-->
<div id="nav"><br>
<ol>
<li><a href="programs.html">Our Programs</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="index.html">Home</a></li>
</ol>
</div><!--end nav-->
</div><!--end header-->
<!--header ends-->
<!--content1 starts-->
<div id="content1">
<img src="images/placeholder.png" width="400" height="323" alt="logo">
<div id="imgright">
<h2>What We Do</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui o
fficia deserunt mollit anim id est laborum."</p>
<div id="button">
<h4>Request A Program</h4>
</div><!--end button-->
</div><!--end imgright-->
</div><!--end content1-->
<!--content1 ends-->
<!--content2 starts-->
<div id="content2">
<div id="one">
<img src="images/arrow.png" width="16" height="14" alt="arrow1">
<h3>Contact Us</h3>
<p>"Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam"</p>
</div><!--end one-->
<div id="two">
<img src="images/arrow.png" width="16" height="14" alt="arrow2">
<h3>About Us</h3>
<p>"Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam"</p>
</div><!--end two-->
<div id="three">
<img src="images/arrow.png" width="16" height="14" alt="arrow3">
<h3> View Our Programs</h3>
<p>"Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam"</p>
</div><!--end three-->
</div><!--end content2-->
<!--content2 ends-->
<!--footer starts-->
<div id="footer">
<h5>Insert some footer information, copyright information also</h5>
</div> <!--end footer-->
<!--footer ends-->
</div><!--end wrap-->
</div><!--end body-->
<div id="blue">
</div><!--end blue-->
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
html, body{
margin:0;
padding:0;
}
#body{
background-image:url(images/background.jpg);
background-repeat:repeat;
margin-top:-25px;
padding:0;
}
#wrap{
border-width:3px;
border-style:solid;
border-color:white;
width:1024px;
height:100%;
margin:0 auto;
padding-top:5px;
}
#header h1{
font-size:36px;
font-family: Terminal, Verdana, Geneva, sans-serif;
color: white;
}
span{
font-size:100px;
color:black;
font-family:brush script std, Verdana, Geneva, sans-serif;
}
#nav{
margin-top:-110px;
margin-bottom:75px;
margin-right:40px;
}
#nav ol {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#nav li {
display: block;
float: right;
}
#nav a {
display: block;
float: left;
margin-right: 3px;
padding: 10px 20px;
text-decoration: none;
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: white;
}
#nav a:hover {
text-decoration: none;
color: black;
}
#content1 img{
margin-left:25px;
}
#imgright{
margin-left:445px;
margin-top:-389px;
}
#button h4{
font-family:"Times New Roman", Times, serif;
font-size:24px;
color:white;
}
h2{
font-family:"Times New Roman", Times, serif;
font-size:48px;
}
#imgright p{
color: white;
font-size:24px;
font-family: "Times New Roman", Times, serif;
margin-top:-30px;
margin-left:20px;
}
#content2{
background-color:#2e3192;
}
#one, #two, #three{width:341.3px;}
#one h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
}
#one p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}
#two h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
}
#two p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}
#three h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
}
#three p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}
#one{
margin-top:50px;
}
#two{
margin-top:-104px;
margin-left:360px;
}
#three{
margin-top:-408px;
margin-left:720px;
}
#footer{
position:absolute;
bottom:0;
color:white;
}
#footer h5{
margin-left:300px;
}
#blue{
position:absolute;
top:500px;
z-index:-1;
background-color:#2e3192;
height:100%;
width:100%;
}
这是它目前的样子:
这就是它应该的样子,没有滚动条并且停在底部。
有任何想法吗?