html - 试图用流体尺寸填充垂直固定 div 旁边的剩余空间

Question

我在左侧有一个固定的垂直 div，设置了最小/最大宽度和 100% 高度。我似乎无法在不重叠的情况下填充剩余空间。有什么解决办法吗？

CSS

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#leftBanner {
    height: 100%;
    background-color: #CCC;
    width: 22%;
    position: fixed;
    text-align: center;
    min-width: 245px;
    max-width: 355px;
    float:left;
}

#mainContent {
    width: auto;
    height: 2000px;
    background-color: red;
    opacity: .3;
}

HTML

<div id="leftBanner"></div>

<div id="mainContent">asdf</div>

Fiddle

我一直在试验围绕两个 div 的包装器，但仍然遇到问题。非常感谢任何帮助。

Answer 1

你不能只设置 width: auto;并让它填充其余空间，因为该元素与其他 div 没有关系。

这个问题的一个解决方案是使用网格布局。你有一个宽度为 100% 的容器；然后它的 child 是其中的一部分。

JSFiddle

HTML

<div class="container">
    <div class="column one">one tenth</div>
    <div class="column nine">nine tenth</div>
</div>

CSS

.one{
    width: 10%;
    background-color: red;
}
.nine{
    width: 90%;
    background-color: grey;
}
.column{
    height: 100px;
    float:left;
    position: relative;
}