2
我正在進行一個學校項目。我是新來的HTML。一旦我的內容超過頁腳，我的頁面就不會向下滾動。我該如何解決？爲什麼不向下滾動？我想保持我的頁腳底部，我試着玩它，但似乎無法做到正確。一旦我的內容超過了頁腳，我的頁面就不會向下滾動
<!DOCTYPE html>
<html lang="en">
<head>
\t <title>TRIP TO LONDON</title>
<meta charset="utf-8">
<link href="layout.css" rel="stylesheet" type="text/css">
<style>
<!--
Jasmine
Web Programming 1
10/28/14
- ids can be used 1 time per html page
- classes can be used unlimited time per html page
- ids typically contain margin, width of the divs
- classes contain styles of the divs
WCAG Guidelines (Section 508) WAI > W3C
AA - Headings Navigation
AAA - large bodies of text paragraphs -->
body {
\t font-family: Helvetica;
\t }
#main{
width: 950px;
margin: 0px auto;
background-color: #ececec;
}
<!--center div-->
#banner{
width: 800px;
margin-left: 45px;
margin-right: 45px;
border: medium;
}
.bg {
background-color:#ececec;
font-size: 88.5%;
font-family: helvetica;
}
#content{
width: 850px;
margin-top: 50px;}
#left{
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
}
#bottom {
width: 450px;
float: left;
padding: 20px 10px 10px 20px;
margin-top: 10px;
}
#right{
width: 300px;
float: right;
padding: 20px 10px 10px 20px;
}
#footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 8px;
background-color: #4285f4;
text-align: center;
color: white;
}
.grid1{
color: #000000;
background-color: #FFFFFF;
font-family: sans-serif;
box-shadow: 0px 2px 4px #888888;
}
.grid2{
color:#000000;
background-color: #FFFFFF;
border-style: dashed;
border-width: 5px;
border-color: #000000;
box-shadow: 0px 2px 4px #888888;
}
#banner1
{
background: #4285f4;
color: white;
position: fixed;
left: 0;
right: 0;
padding: 10px;
height: 30px;
text-align: center;
top: 0;
width: 100%;
font-family: Helvetica;
font-size: 18px;
}
</style>
</head>
<body id="body" class="bg">
<div id="main">
<div id="banner1">TRIP TO LONDON</div><!--close banner-->
<div id="content">
<div id="left" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.</div><!--close left-->
<div id="right" class="grid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis turpis ut sapien egestas euismod. Pellentesque a ultricies neque. Cras sed nisl mollis, iaculis metus vel, venenatis lectus. Cras nisi orci, convallis sit amet nibh ac, vestibulum aliquet lectus. Curabitur eget cursus lorem. Praesent hendrerit in nunc non rutrum. Suspendisse ac elit vitae odio condimentum consequat. Cras a fringilla dui, dapibus lacinia quam. Sed quis sagittis ante. Quisque non congue lacus, et scelerisque arcu. Cras cursus finibus gravida. Nulla id lacus consequat, finibus quam ac, ultricies purus. Curabitur scelerisque massa id leo malesuada, vel semper quam venenatis. Fusce viverra, erat at convallis laoreet, tellus erat bibendum nulla, id dapibus tellus orci viverra leo. Cras posuere id nibh at ornare. Praesent luctus magna et lacus malesuada, id ullamcorper enim vulputate. Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam.
</div><!--close right-->
<div id="bottom" class="grid1"> Donec vestibulum nisi sit amet vulputate consequat. Proin ultricies mi felis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus blandit, porttitor condimentum diam. sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, elis. Nunc accumsan venenatis ornare. Maecenas luctus venenatis accumsan. Vestibulum sit amet augue sit amet leo sollicitudin accumsan vel non massa. Morbi sodales lacus massa, non accumsan risus tempus ut. Proin convallis auctor tortor, eu venenatis turpis congue nec. Donec quam velit, volutpat bibendum metus bla.
</div>
</div><!--close content-->
<div id="footer">J.O. Copyright 2014</div><!--close footer-->
</div><!--close main-->
</body>
</html>
添加溢出：Y進入你的身體[現場演示]（http://jsfiddle.net/ovyrwsne/） – jbutler483 2014-11-03 14:48:24
你的CSS可能是關閉，設置對於你的元素的高度屬性應該在頁腳之下，這樣頁腳就會被進一步推下 – 2014-11-03 14:51:48
「id通常包含頁邊距，div的寬度」？這是完全錯誤的:) – 2014-11-03 14:53:54