容器 DIV 中的固定高度和 100% 高度

Question

我试图让一个 div 扩展到 100% 的高度，同时滚动条的底部仍然可见，同时也包含一个固定高度的 div。有人可以帮帮我吗:)

当使用波纹管布局时，.div2 底部的垂直滚动条从视点高度下降，我猜是因为 .div1 高 200px，推动 div1 为 100% 高度 + 200px。

有没有办法让 .div1 固定高度，而 .div2 延伸以填充剩余的窗口高度并在达到该高度时溢出。

这里是 CSS

html, body {
        height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        overflow:hidden;
    } 
    .container
    {
        height:100%;
    }
    .leftContent { 
        left:0; 
        top:0; 
        padding:0; 
        width:250px; 
        height:100%; 
        color:white;
        background:blue;
        overflow:hidden;
        border:blue solid;
    } 
    .div1
    {
        height:200px;
        background-color:black;
        border: red solid;
    }
    .div2
    {
        overflow:scroll;
        height:100%;
        border:yellow solid;
    }

这里是 HTML。

<div id="container" class="container">
    <!-- Start Left Column-->
    <div id="leftColumn" class="leftContent">
        <div id="div1" class="div1">
            CONTENT 
        </div>
        <div id="div2" class="div2">
            START START START START START START START START START START START START START START START START 
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            END END END END END END END END END END END END END END END END END END END END END END END END 
        </div>
    </div> 
    <!-- End Left Column-->
</div>

非常感谢。 谢谢

Answer 1

为 .div2 尝试此设置

.div2 {
    overflow:scroll;
    position: absolute;
    top: 200px;
    left: 0;
    bottom: 0;
    width: 250px;
    border:yellow solid;
}

这样你就可以将.div2 放置在.div1 的正下方，并以绝对定位的方式扩展它的宽度和高度（到容器的宽度和高度）

编辑

可以通过将.div2 包装到另一个 div 中来修复 IE 错误 -> <div><div class="div2"></div></div>

也可以尝试将此 CSS 添加到您的 .leftContent 声明中

.leftContent {
    /* other declarations */
    position: relative;
    overflow: hidden;
}

Answer 2

更新以下css

.leftContent { 
    left:0; 
    top:0; 
    padding:0; 
    width:250px; 
    height:100%; 
    color:white;
    background:blue;
    overflow:hidden;
    border:blue solid;
    position:relative;
} 
.div1
{
    height:200px;
    background-color:black;
    border: red solid;
    border-width:2px;
}
.div2
{
    border-width:2px;
    position:absolute;
    top:204px;
    bottom:2px;
    overflow-y:scroll;
    right:0px;
    border:yellow solid;
}

将左侧内容设为相对，使其成为定位元素，现在是两个 div 的包含块。这对于允许 div2 填充剩余空间很重要。

明确设置border-width，以便我知道将 div2 放置在何处，以免与 div1 的边框重叠。

基本上使用绝对定位来让 div2 填充 leftContent 中的剩余空间，同时明确指定定位。如果我使用overflow，我会在底部得到一个不滚动的滚动条，以摆脱我使用overflow-y。