[米随随] s5s5

开心就好 提出了一个 关于CSS的小问题，题目是这样的~ 这样的结构：

程序代码

<div id="Header">这是标题</div>
<div id="Main">
  <div id="Content">这是主内容</div>
  <div id="Sidebar">
    <div id="Stats">
      <ul>
        <li>主页</li>
        <li>目录1</li>
        <li>目录2</li>
      </ul>
    </div>
    <div class="Other">这是其它内容</div>
  </div>
</div>
<div id="Footer">这是结尾</div>

然后用CSS来实现下面的表现~

我研究了半天，搞出来了~ 只做了IE6 IE7 FF2 的兼容，其他的懒得搞了，也没多少人用哈~ 请大家指点一二~

第一种结构~

程序代码

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.22em;
}
ul {
  list-style: none;
}
#Header {
  background: #cf0;
}
#Main {
  background: #c90;
  padding-left: 200px;
  overflow: hidden;
  height: 1%;
}
#Content {
  background: #c30;
  width: 100%;
  float: right;
  margin-bottom: -32767px;
  padding-bottom: 32767px;
}
#Sidebar {
  background: #f00;
  width: 200px;
  float: left;
  margin-left: -200px;
  \_margin-left: -100px;
  margin-bottom: -32767px;
  padding-bottom: 32767px;
}
#Stats {
  background: #f60;
}
.other {
  background: #fc0;
}
#Footer {
  background: #ff3;
  clear: both;
}

第二种结构~

程序代码

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.22em;
}
ul {
  list-style: none;
}
#Header {
  background: #cf0;
}
#Main {
  background: #c90;
  padding: 0 200px;
  overflow: hidden;
  height: 1%;
}
#Content {
  background: #c30;
  width: 100%;
  margin-right: -100%;
  float: left;
  margin-bottom: -32767px;
  padding-bottom: 32767px;
}
#Sidebar {
  background: #f00;
}
#Stats {
  background: #f60;
  margin-left: -200px;
  width: 200px;
  float: left;
  margin-bottom: -32767px;
  padding-bottom: 32767px;
}
.other {
  background: #fc0;
  float: right;
  width: 200px;
  margin-right: -200px;
  \_margin-right: -100px;
  margin-bottom: -32767px;
  padding-bottom: 32767px;
}
#Footer {
  background: #ff3;
  clear: both;
}

第三种结构~

程序代码

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.22em;
}
ul {
  list-style: none;
}
#Header {
  background: #cf0;
}
#Main {
  background: #c90;
  padding-top: 1.22em;
  position: relative;
}
#Content {
  background: #c30;
  margin-left: 200px;
  z-index: 2;
  position: relative;
}
#Sidebar {
  background: #f00;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}
#Stats {
  background: #f60;
  width: 100%;
  position: absolute;
}
#Stats ul {
  overflow: hidden;
}
#Stats li {
  float: left;
}
.other {
  background: #fc0;
  width: 200px;
  position: relative;
  top: 1.22em;
}
#Footer {
  background: #ff3;
  margin-left: 200px;
  position: relative;
  z-index: 2;
}

点此下载

米随随 岁次丁亥七月十七辰时 书于深圳