在 IE6 中，使用 div，如何将整个页面分成两列，左侧 div 具有静态宽度，右侧 div 具有弹性宽度？答案

【问题标题】：In IE6, and using divs, how to split entire page into two columns, left div with static width and right with elastic width?在 IE6 中，使用 div，如何将整个页面分成两列，左侧 div 具有静态宽度，右侧 div 具有弹性宽度？
【发布时间】：2011-05-28 15:14:51
【问题描述】：

我不知道在 IE6 中是否可以实现我的要求，但这里是：我正在处理页面布局，并希望将正文拆分为两个容器 div。我想给左边的 div 一个 200px 的固定宽度；同时使正确的 div 沿页面宽度具有弹性。右 div 的左边框必须与左 div 的右边框接触才能使事情更清晰我做了一个图表：

【问题讨论】：

标签： html css internet-explorer internet-explorer-6

【解决方案1】：

jsfiddle 示例：http://jsfiddle.net/Damien_at_SF/UhdHu/

HTML：

<html>
    <body>
        <div id="col_1">
            <p>column 1</p>
        </div>
        <div id="col_2">
            <p>column 2</p>
        </div>
    </body>
</html>

CSS：

html, body {
     height:100%;
     margin:0;
     padding:0;
     background-color:#000000;
}
#col_1 {
     height:100%;
     position:absolute;
     top:0px;
     left:0px;
     width:200px;
     padding:10px;
     background-color:#DBDBDB;
}
#col_2 {
     height:100%;
     margin-top:0px;
     margin-right:0px;
     margin-left:220px;
     padding:10px;
     background-color:#FFFFFF;
     overflow:hidden;
}

来源：http://css.flepstudio.org/en/css-box-model/1-column-fixed-1-column-fluid.html

希望有帮助:)

【讨论】：

【解决方案2】：

<html style="height:100%">
<body style="height:100%;margin:0px;">
  <div style="position:absolute;left:0;right:0;z-index:1000;height:100%;width:200px;background-color:red;">
    Sidebar
  </div>
  <div style="height:100%;width:100%;">
    <div style="padding-left:200px;background-color:blue;height:100%">
      Content
    </div>
  </div>

</body>
</html>

在线：http://milkish.com/test/ie6.html 使用 netrender 进行检查：http://ipinfo.info/netrenderer/index.php

【讨论】：