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

Question

请检查这个小提琴：

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

如何将蓝色div水平拉伸，使其停靠在紫色的右边div？

如果我设置宽度：100％它只是做一个div用于“断行”紫色div。

我也试过显示：inline（-block）没有任何帮助使紫色div保持相同

作为蓝色div。

解决方案必须适用于IE9。请不要CSS3黑客。

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/

Answer 2

使用CSS3相对安全的calc属性。 - ＆GT; http://jsfiddle.net/joplomacedo/9EJpu/27/

您可以使用更安全的属性，这似乎是使用现有标记执行此操作的最快方式。

Answer 3

示例：

http://jsfiddle.net/hunter/9EJpu/37/

---

要使主面板的内容具有适当的宽度，您可以在left-col

中添加包裹元素

#left_col
{      
    overflow:auto;
    float:left;
    height:100%;
    width:100%;
    background-color:blue;
}

#left_col > *
{
    margin-right: 100px;
}

#right_col 
{
    right: 0;
    top: 0;
    position:fixed;
    z-index: 1000;
    height:100%;
    float:right;
    width:100px;
    background-color:purple;
}

#footer
{
    width: 100%;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color:yellow;
    z-index: 2000;
}

Answer 4

另一种可能使用更安全的box-sizing属性的解决方案。

http://tinkerbin.com/Vi1Rtt1T

Answer 5

使蓝色宽度为100％，并用紫色的宽度填充右侧，紫色应该固定在右侧

编辑：

是的，我忘记了，好吧然后只是将一个div漂浮到右边，紫色的宽度（蓝色的内部）。只需要一个空间持有者，这样事情就不会发生在

之下