html - 这种布局似乎不适合通常的 CSS 技术

Question

只需检查这个 fiddle :

http://jsfiddle.net/9EJpu/25/

如何水平拉伸(stretch)蓝色 div 100%，使其停靠在右侧紫色 div 上？

如果我设置 width:100% 它只是做 div 用来“换行”紫色 div 的事情。

我也试过 display:inline(-block) 没有任何帮助让紫色 div 保持不变

行作为蓝色 div。

该解决方案必须适用于 IE9。请不要使用 CSS3 hack。

Answer 1

如果我正确地解释了您的问题，您需要更改一些内容...

#wrap {
   width:100%;
    height:100%;
   background-color:green;
   position: relative;
}
#left_col {  
    overflow:auto;
   float:left;
   height:100%;
   margin-right: 100px;
    background-color:blue;
}
#right_col {   
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width:100px;
   background-color:purple;
}

您可以将 position: fixed 添加到 #right_col，但它会覆盖您的页脚。

这是一个演示:

http://jsfiddle.net/xuBfe/