CSS定位涉及固定宽度和剩余空间

Question

我有一个宽度为100％的容器，包含2个div， 第一个1的固定宽度为50px，第二个需要占用所有剩余空间（如果我给它宽度：100％它会明显下降）

以下是简化标记示例：

<div style="width: 100%;height: 50%; border:1px solid black;">

<div style="width: 50px; border: 1px solid green;height: 100%;box-sizing: border-box;"></div>

<div style="width: auto; border: 1px solid red;height: 100%;box-sizing: border-box;"></div>

</div>

当然我不想在窗口调整大小事件

上使用任何使用javascript或事件处理程序的解决方案

Answer 1

解决方案1 ​​

在第一个子集div float:left;

上

在第二个子集上：overflow:hidden（或自动）。这会触发块格式化上下文 - 这会导致第二个div填充剩余的水平宽度。

FIDDLE

.container
{
    width: 100%;height: 50%; border:1px solid black;
    height: 100px;
}
.left
{
    width: 50px; border: 1px solid green;height: 100%;box-sizing: border-box;
    float:left;
}

.right
{
    width: auto; border: 1px solid red;height: 100%;box-sizing: border-box;
    overflow: hidden;
}

这种方法的一个重要优点是它是跨浏览器的。 （不需要css3）

解决方案2

在第一个子div上设置position:absolute并在第二个子div上设置：padding-left:50px - 使用box-sizing属性将该填充放在框中。

<强> FIDDLE

.container
{
    width: 100%;height: 50%; border:1px solid black;
    height: 100px;
    position: relative;
}
.left
{
    width: 50px; border: 1px solid green;height: 100%;box-sizing: border-box;
    position:absolute;
    top:0;
    left:0;
}

.right
{
    border: 1px solid red;
    width: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 50px;
}

Answer 2

只需使用margin-left:50px并将其保留为块元素即可。如果您为第一个div添加了额外的填充，则相应地使用margin-left。在控制台中检查div 1的盒子模型。

html, body {
    height:100%;
}
#div1  {
    position:fixed; // absolute can be used
    top:0;
    bottom:0;
    height:100%;
    width:50px;
}
#div2 {
    margin-left:50px;
    height:100%;
}

Answer 3

我使用css Calc（）函数

尝试过这个

#div2
{
/*Used -54 as all divs have thier border of 1px*/    
width: -moz-calc(100% - 54px);
width: -webkit-calc(100%-54x);
width: calc(100%-54x);
}

在这里查看演示小提琴DemoFiddle

随着宽度的计算，这适用于任何宽度。

参考链接

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

https://hacks.mozilla.org/2010/06/css3-calc/