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

Question

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

当使用波纹管布局时，.div2 底部的垂直滚动条会脱离视点的高度，我猜是因为 .div1 的高度为 200px，将 div1 推至 100% 高度+ 200 像素。

有没有办法让 .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 的正下方，使用绝对定位，并按照您想要的方式扩展其宽度和高度（达到容器）

编辑

IE bug 可以通过将 .div2 包装到另一个 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来摆脱它。