我一直在寻找如何在我的页面侧面获得一个彩色的 div，以及如何让我的页脚一直到页面底部。我试图做一个粘性页脚，但我无法让它工作。要了解我在说什么，请访问此处:http://web2.nicholls.edu/maco-web-2/habitat/workfiles/trial%20fix.html
浅蓝色矩形(事件背景 div)和页脚栏都位于窗口底部，但是当您向下滚动时，您可以看到内容已经向下延伸超过了它们。
这是我的 HTML 和 CSS。 (如果我的代码 super 糟糕，我深表歉意，这是一个类(class)，也是我尝试构建的第一个网站。
@charset "UTF-8";
/* CSS Document */
html,body { height:100%; }
body {
font-family: Helvetica, Arial, sans-serif;
margin:0;
}
#navbar{
position:absolute;
top:0px;
height:88px;
background-color: #314d89;
width:100%;
z-index:75;
}
#wrapper {
width:90%;
margin-left:auto;
margin-right:auto;
position:relative;
height:100%;;
}
#logo {
position:absolute;
margin-right:0;
top:0;
z-index:80;
}
#nav {
font-size:1.25em;
color:white;
z-index:100;
position:absolute;
right:0px;
top:60px;
}
#big-photo{
width:100%;
position:absolute;
top:80px;
background-image:url(../images/photo_01.jpg);
background-repeat:no-repeat;
height:400px;
background-size:100%;
z-index:50;
-webkit-box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.5);
}
#news{
position:absolute;
top:490px;
width:50%;
}
#events-background {
position:absolute;
width:35%;
background-color: #698bd3;
height:100%;
top:0px;
right:0px;
}
#upcoming-events {
position:absolute;
top: 490px;
margin-right:0;
width:30%;
right:0px;
}
#footer-bar {
width:100%;
height:40px;
background-color:#314d89;
position:absolute;
bottom:0px;
}
.white-header {
color: #ffffff;
font-weight:300;
text-transform:uppercase;
font-size:2em;
}
.green-header {
color: #84d67b;
font-weight:300;
font-size:2em;
text-transform:uppercase;
} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="trial fix css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navbar"> </div>
<div id="big-photo"> </div>
<div id="events-background"> </div>
<div id="wrapper">
<div id="nav"> ABOUT | VOLUNTEER | APPLY | RESTORE | CALENDAR | GALLERY | CONTACT </div>
<div id="logo"><img src="../images/fixed-logo_02.png" width="295" height="148" alt="Bayou Habitat for Humanity Logo" /> < </div>
<div id="news"> <h2 class="green-header"> HABITAT NEWS </h2> <p> Volunteer Day </p> <p> Volunteer Day is Saturday, December 14th, at the Habitat for humanity site in Thibodaux.
Having the details of its syndication contracts and movie packages exposed could potentially put millions of dollars in future deals at risk. All of these little, individual show and movie deals actually add up to billions of dollars in revenue for Sony Pictures annually. To be sure, while a 2009 cash licensing deal of $26,600 from a television station in Detroit for 133 episodes of Good Times to be aired from September 2009–2010 doesn’t seem like a ton of money, the fact that Sony was still banking cash from a show 35 years after it aired speaks to the revenue-generating capabilities of library content. (Good Times aired its last original episode in 1979.)
Now think about how much potential revenue Seinfeld, not to mention Jeopardy and Wheel of Fortune, which Sony Pictures also produces, is capable of generating over the next two decades and how much of that could be left on the table as a result of the leak.
That’s the frightening scenario Sony Pictures now faces, at a time when it is trying to increase its annual revenue to $11 billion by 2018 from $8 billion now.
</p></div>
<div id="upcoming-events"> <h2 class="white-header"> Upcoming Events </h2>
<p> Christmas Toy Drive </p> </div>
<div id="statement"> We are pledged to the letter and spirit of U.S. policy for the achievement of equal housing opportunity throughout the nation. We encourage and support an affirmative advertising and marketing program in which there are no barriers to obtaining housing because of race, color, religion, sex, handicap, familial status, national origin, age, marital status, sexual orientation, or sources of income. </div>
<div id="about" >© 2014 Bayou Area Habitat for Humanity
[ phone: (985) 447-6999 ] [ Contact via Email ]
[ Privacy Policy ] </div>
<div id="newsletter"></div>
</div>
<div id="footer-bar"></div>
</body>
</html>最佳答案
为元素添加position:fixed和bottom: 0px;
或
position: absolute;
bottom: 0px;
关于html - 如何使 div 和页脚延伸到页面底部而不仅仅是窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27324860/