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

我在页面左侧有一个div用于导航链接。点击标题可展开链接的子集。我将此div设置为页面高度的100％，以便列占据页面的整个左侧。当所有子类别都展开时，会出现问题。 div的内容在页面底部运行，但不添加滚动条。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。当其中的每一个展开时，它都会从页面底部运行，但不会添加滚动条。

添加溢出：auto没有改变任何东西。

来源

2011-07-14 navalhawkeye

很难用代码说出来。溢出：自动;通常做的伎俩。 – Jawad

与@Jawad一致，实际上不可能说没有代码，但我的猜测是某人在主内容或body/html容器的某处“巧妙”地使用了“overflow：hidden”。 – Nicole

对不起，我刚添加了代码。溢出：汽车没有做任何事情。我也没有使用溢出：隐藏在任何地方。 – navalhawkeye

Side content div是否使用固定位置？因为这通常是滚动条不出现的原因。尝试在该div上设置overflow:auto css样式以在需要时添加滚动条。

更新：

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

试试这个：

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

来源

2011-07-14 15:42:46 BumbleB2na

对我来说，它听起来像他们希望浏览器有一个滚动条，而不是div本身。 'overflow：auto'不应该是必须的（或者可能是，这取决于主布局采用了哪些技巧）。 – Nicole

对不起，我添加了代码。我只是尝试了overflow：auto，但它没有做任何事情。它甚至没有将滚动条添加到leftNavigation div。 – navalhawkeye

谢谢，代码帮助。我更新了我的答案。 – BumbleB2na

当事情是 '固定' 的定位，也不会添加滚动条。您可以尝试使用position: relative来定位它，或者您可以设置top: 0。如果top：0还不够，则必须将高度设置为比窗口小的固定高度。

来源

2011-07-14 16:01:54 Catfish

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

现在是正确的。

来源

2017-08-20 09:05:04 Kshresthasan

尽管此代码片段可能会解决问题，但[包括解释]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）确实有助于提高帖子的质量。请记住，您将来会为读者回答问题，而这些人可能不知道您的代码建议的原因。 –

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

回答

相关问题