Question

我有一个包含侧栏和内容区域的包裹，我的侧栏固定为240px但内容区域我希望是窗口其余部分的最大宽度。

然而我无法做到这一点。我试图width: 100%延伸到整个窗口。我试过auto不起作用。我不知道还能尝试什么。

这是我的代码：

/*** Content ***/
.con_wrap{
    width: 100%;
    display: block;
}
.cont{
    width: 100%;
    background: red;
}
.left_side{
    background: #22282b;
    height: 100vh;
    margin: 0;
    width: 240px;
    float: left;
}

Answer 1

对于侧边栏，您应该float: left，并且对于侧边栏右侧的内容，您应该定义overflow: hidden。

这里有一个简单的例子：

http://jsfiddle.net/dkGbd/

这种方法的工作方式是使用overflow属性在右边的元素上声明一个块格式化上下文。

浮点数，绝对定位元素，内联块，表格单元格，表格标题以及除“可见”之外的“溢出”的元素（除非该值已传播到视口））建立新的块格式化上下文。

在块格式化上下文中，每个框的左外边缘触及包含块的左边缘（从右到左格式化，右边缘触摸）。即使存在浮动也是如此（尽管盒子的线框可能因浮动而缩小），除非盒子建立新的块格式化上下文（在这种情况下盒子本身可能因浮动而变窄）。 p>

CSS宽度混合固定和％ - 自动填充最大空间 -

1 个答案: