Question

我正在尝试使用另外两个div将自动缩放div垂直划分为两个。到目前为止我所拥有的：

<div id='wrapper'>
  <div id='left'>some stuff</div>
  <div id='right'>more stuff</div>
</div>

与

#frame {
  position: static;
  width: 1000px;
  height: auto;
  /* more positioning stuff */
}
#left {
  position: absolute;
  width: 200px;
  height: 100%;
}
#right {
  position: static;
  margin-left: 200px;
}

除非#right的内容高于#left的内容，否则这似乎正常。在这种情况下，左边的部分内容是不可见的。如何计算所需的#wrapper高度时，如何确保左div的高度也被考虑在内？

更新

与此同时，我也尝试将#left和#right静态化，但两次潜水不再并排显示。

Answer 1

#wrapper {
    overflow-y:hidden;
}
#left {
    float:left;
    width:200px;
}
#right {
    margin-left: 200px;
}

如果需要背景颜色或背景图像，则需要将背景图像提供给包装。

这个不会在IE6中工作，可能会给你带来麻烦7＆amp; 8如果您不使用XHTML doctype ...

使用CSS垂直拆分可变大小的div

1 个答案: