Fixed top, footer and left bar : position fixed « Layout « HTML / CSS






  1. HTML / CSS
  2. Layout
  3. position fixed

Fixed top, footer and left bar

 

<?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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body {
  margin: 0;
  padding: 0;
}

#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 23px;
}

* html #top-bar {
  position: absolute;
}

#topbar-inner {
  height: 23px;
  background: #bbb;
}

* html #topbar-inner {
  margin-right: 17px;
}

* html body {
  padding-top: 23px;
}

* html,* html body {
  overflow-y: hidden;
  height: 100%;
  margin-top: -23px;
}

#mainouter {
  position: relative;
  z-index: 2;
  padding-top: 23px;
  padding-bottom: 40px;
  margin-left: 150px;
  background: #ccc;
  min-height: 100%;
}

* html #mainouter {
  height: 100%;
  overflow: auto;
  overflow-y: scroll;
  position: relative;
  z-index: 2;
  padding-top: 23px;
  padding-bottom: 40px;
}

#bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 40px;
}

* html #bottom {
  position: absolute;
  bottom: -1px;
}

#bottom-inner {
  height: 40px;
  background: #aaa;
}

* html #bottom-inner {
  margin-right: 17px;
}

* html #left {
  position: absolute;
  height: 100%;
  width: 150px;
  left: 0;
  top: 23px;
  overflow: auto;
  z-index: 100;
  margin-bottom: -63px;
}

html>body #left {
  position: fixed;
  left: 0;
  top: 23px;
  bottom: 40px;
  padding: 0;
  width: 149px;
  border-right: 1px solid #000;
}
</style>
</head>
<body>
<div id="top-bar"> 
  <div id="topbar-inner">this is a test. this is a test. </div>
</div>
<div id="left"> 
  <ul>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>

    <li>menu</li>
    <li>menu</li>
  </ul>

</div>
<div id="mainouter"> 
  <p>Content start</p>
  <p>Content</p>
  <p>Content</p>

  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>

  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>

  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>

  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content end</p>

</div>
<div id="bottom"> 
  <div id="bottom-inner">Fixed Bottom</div>
</div>
</body>
</html>








Related examples in the same category

1.Elements with a fixed position are always positioned relative to the browser's viewport, not in a document's structure.
2.position:fixed positions an element at an offset from the viewport.
3.Elements with a fixed position stay in place, even when a document is scrolled.
4.Using Fixed Positioning
5.Fixed position and static position
6.position fixed: top left
7.watermark with position fixed
8.Position:fixed header
9.Absolute and fixed positioning use left, right, top, bottom, and z-index to control the alignment of the absolute box.
10.move an element into its own layer and fix its position to the viewport.
11.Fixed block with width and height to bottom and top
12.fixed block to top and left
13.Fixed block to top and right
14.Fixed block to bottom and left
15.Fixed block to bottom and right
16.position-fixed offset: left top