0

只需检查这个小提琴：

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

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

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

我也试过 display:inline(-block) 没有什么能帮助紫色 div 保持不变

线作为蓝色 div。

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

4

5 回答 5

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/ ​</p>

于 2012-06-11T18:54:03.487 回答
0

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

http://tinkerbin.com/Vi1Rtt1T

于 2012-06-11T19:00:53.177 回答
0

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

不过，您可以使用更安全的属性，这似乎是使用现有标记最快的方法。

于 2012-06-11T18:49:11.133 回答
0

例子：

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;
}
于 2012-06-11T18:56:55.557 回答
-1

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

编辑：

是的，我忘记了，好的，然后将一个 div 浮动到右侧，宽度为紫色（在蓝色内部）。只需要一个空间支架，这样东西就不会在下面跑

于 2012-06-11T18:52:24.300 回答