Question

我的页面左侧有一个div用于导航链接。单击标题会扩展链接的子集。我将此div设置为页面高度的100％，以便列占据页面的整个左侧。扩展所有子类别时会出现此问题。 div的内容从页面底部开始，但不添加滚动条。

我尝试将高度设置为自动以查看是否可以解决问题（忽略它不占用整个左侧的事实），但这也没有解决它。

那么，当div扩展超过页面高度时，我需要做什么才能获得滚动条？如果不需要，滚动条就会消失。

谢谢。

.leftNavigation {
display:block;
position:fixed;
width:200px;
height:100%;
top:140px;
left:0;
background-color:#f0f0f0;

}

<div class="leftNavigation">
    <p class="linkHeader" id="townLinksHeader"><img src="img/image.jpg" width="200" height="40" alt="Sunnyvale, CA" /></p>
    <div class="links" id="townLinks">
        <ul>
            <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
        </ul>
    </div>

左侧导航div中有4个段落/ div组合。在单击之前仅显示段落。然后显示链接div。当每个展开时，它都会从页面底部运行，但不会添加滚动条。

添加溢出：自动没有改变任何内容。

Answer 1

副内容div是否使用固定定位？因为，这通常是导致滚动条没有出现的原因。尝试在该div上设置overflow:auto css样式，以便在需要时添加滚动条。

更新：

你有顶：140px在那里和身高：100％。这实际上是将侧面div推到页面下方。如果可扩展内容没有占用太多空间，那么它将从页面底部流出，不会出现滚动条。

试试这个：

.leftNavigation {
    display:block;
    position:fixed;
    width:200px;
    height:100%;
    top:0;
    left:0;
    padding-top:140px;
    overflow:auto;
    background-color:#f0f0f0;
}

Answer 2

当某些东西被“固定”定位时，它不会添加滚动条。您可以尝试使用position: relative进行定位，也可以设置top: 0。如果top：0仍然不够，则必须将高度设置为小于窗口的固定高度。

Answer 3

.leftNavigation {
    display:block;
    position:fixed;
    width:200px;
    height:100%;
    top:0;
    bottom:0;
    left:0;
    margin-top: 140px;
    overflow:auto;
    background-color:#f0f0f0;
}

现在它是正确的。

Div扩展了页面高度，但没有滚动条

3 个答案: