1

我试图让一个 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>

非常感激。谢谢

4

2 回答 2

4

为 .div2 尝试此设置

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

这样，您就可以将其放置.div2在绝对定位的正下方.div1，并根据需要扩展其宽度和高度（到容器的宽度和高度）

编辑

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

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

.leftContent {
    /* other declarations */
    position: relative;
    overflow: hidden;
}
于 2010-02-08T13:56:36.140 回答
0

更新以下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.

于 2011-12-01T15:52:14.737 回答