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

Question

我有一个宽度为 100% 的容器，其中包含 2 个 div，第一个 1 的固定宽度为 50px，第二个需要占据所有剩余空间（如果我给它 width: 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 填充剩余的水平宽度。

小提琴

.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 属性将该填充放置在框中。

小提琴

.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

我已经尝试过使用 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/

Answer 3

只需使用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%;
}