Jan 11, 2009

IE6实现positon:fixed

HTML代码:

<div id="userPanel">
 <h2>user panel</h2>
 <ul>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
 </ul>
</div>

<div id="wrap">
 <div id="content">
  <div class="text">
   <p> text </p>
   <p> text </p>
   <p> text </p>
   <p> text </p>
  </div>
 </div>
</div>

CSS代码:

#userPanel {
 width: 160px;
 padding: 10px;
 background-color: #EEE;
 position: fixed;
 top: 50px;
 left: 25px;
}


#top {
 padding: 5px 15px;
 background-color: #ffffbb;
 position: fixed;
 right: 0;
 bottom: 0;
}

#content {
 width: 550px;
 margin-left: 220px;
 background-color: #eee;
}

.text {
 height: 1000px;
}

/* IE 6 only
------------------------------------- */
* html, * html body {
 /overflow: auto;
 width: 100%;*/
 height: 100%;
}

* html #wrap {
 height: 100%;
 width: 100%;
 overflow: auto;
 overflow-y: scroll;
 position: relative;
}

* html #userPanel {
 position: absolute;
}

*html #top {
 position: absolute;
 right: 16px;
}

demo预览

No comments:

Post a Comment