Question

我正在做一个学校项目。我是html的新手。一旦我的内容超过页脚，我的页面就不会向下滚动。我该如何解决？为什么它不会向下滚动？我想把我的页脚放在底部，我试着玩弄它但似乎无法正确使用它。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<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 {
	font-family: Helvetica;
	}

 
 #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"> &nbsp;
<div id="banner1">TRIP TO LONDON</div><!--close banner-->
<div id="content"> &nbsp;

  <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>

＆＃13;

Answer 1

您的内容会按原样滚动到页面底部。您无法看到它，因为您的页脚位于具有固定位置的内容之上。简单的解决方案是将高度放在页脚上，并为内容添加与填充相同的高度。或者只是像这样添加一些padding-bottom到#content。并添加溢出：隐藏到#content所以它有高度。如果父级填充浮动子元素，则它不具有高度。所以要么添加溢出：隐藏;或使用clearfix：）

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<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 {
	font-family: Helvetica;
	}

 
 #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; 
  padding-bottom: 50px;
  overflow: hidden;
 }
  

 #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"> &nbsp;
<div id="banner1">TRIP TO LONDON</div><!--close banner-->
<div id="content"> &nbsp;

  <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>

＆＃13;

Answer 2

如果您的内容偏离了太远，而您无法滚动它，则意味着包含内容的元素不够大。尝试设置具有更大高度值的所有内容的元素（我猜测你的案例中的body元素）

所以在你的CSS中如果： height:800px

将其设置为 height:1200px

或足以容纳所有内容

一旦我的内容超过页脚，我的页面就不会向下滚动

2 个答案: