Content scrolls, fixed footer : content section « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. content section

Content scrolls, fixed footer

 


<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#footer {
  height:100px;
  background:#ccc;
  width:100%;
  border-top:3px solid red;
  position:fixed;
  bottom:0;
  left:0;
  text-align:center;
}
#content {
  position:absolute;
  overflow:auto;
  background:#aaa;
  top:0;
  left:0;
  width:100%;
  bottom:103px;
}
</style>
</head>
<body>
<div id="content"> 
  <p>Some text to scroll</p>
  
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>

  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>

  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>

  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>

  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>

  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll</p>
  <p>Some text to scroll 1</p>
  <p>Some text to scroll 2 </p>

  <p>end</p>
</div>
<div id="footer">Footer</div>
</body>
</html>








Related examples in the same category

1.Use
2.use
3.use
4.Set

in extra content

5.Set

and

in extra content section

6.Content section with border
7.Content DIV
8.Content background
9.stretching content