Div扩展超过页面高度，但没有滚动条。

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。当这些中的每一个被展开时，它会超出页面底部，但不会添加滚动条。

添加overflow：auto并没有改变任何东西。

- navalhawkeye

---

很难在没有代码的情况下说出来。通常使用Overflow: auto;就可以解决问题了。 - Jawad

同意@Jawad的说法，没有代码实例很难确定问题所在，但我猜测可能是某个人在主内容或body/html容器中“聪明地”使用了overflow:hidden。 - Nicole

抱歉，我刚刚添加了代码。Overflow:auto 没有起作用。我也没有在任何地方使用 overflow:hidden。 - navalhawkeye

当将高度设置为自动时会发生什么？听起来左侧导航以某种方式被设置为overflow: hidden。您可能需要在另一个具有height: 100%的div中包装导航，而内部div则获得自动高度。您能否将页面放在某个实时位置或jsfiddle上？ - David Nguyen

我们真的需要复制这个问题。使用上述代码，我无法做到。猜想我不够有创意。是否有可能提供完整的带功能代码 - http://jsfiddle.net/wMj6q/ - Jawad

Answer 1

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

更新：

你在里面加入了top:140px和height:100%。这实际上将侧边div推到页面下方。如果可扩展内容占用的空间不多，那么它将流到页面底部，而没有滚动条会出现。

尝试这个：

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

- BumbleB2na

---

对我来说，他们似乎希望浏览器有一个滚动条，而不是 div 本身。overflow:auto 不应该是必要的（或者可能是必要的，这取决于主布局上使用了什么技巧）。 - Nicole

抱歉，我添加了代码。我尝试使用overflow:auto，但它没有起作用。它甚至没有为leftNavigation div添加滚动条。 - navalhawkeye

非常感谢。离开position:fixed没有起作用，但我将其换成了relative，效果很好。再次感谢。 - navalhawkeye

Answer 2

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

现在是正确的。

- Kshresthasan

---

虽然这段代码片段可能解决了问题，但包括说明真的有助于提高你帖子的质量。请记住，您正在为将来的读者回答问题，而那些人可能不知道您的代码建议原因。 - Patrick Hund

Answer 3

当某个元素被设置为“fixed”定位时，它将不会添加滚动条。您可以尝试使用position: relative重新定位它，或者您可以设置top: 0。如果top: 0仍然不够，您将需要将高度设置为小于窗口的固定高度。

- Catfish