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错误 - ＆gt; <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。

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

2 个答案: