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擴展了頁面高度，但沒有滾動條

回答

相關問題