在div標籤內的無序列表的滾動條

我有一個div標籤內的無序列表，我希望列表可以滾動，如果列表中的項目數超過了網頁的長度。在div標籤內的無序列表的滾動條

<div style="width: 300px; height:100px; overflow: auto"> 
    <ul> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    </ul> 
</div>

如果我將高度硬編碼爲100像素，並且項目數超過此高度，則會出現滾動條。但是，如果我將高度設置爲100％，滾動條不會出現。有人能讓我知道我要去哪裏嗎？

您可以查看http://jsfiddle.net/xf7kjcf6/

來源

2015-04-19 user1692342

當您使用任何元素的height: 100%;，你需要問一個問題100％是什麼？通過defauly，用戶代理將height: auto;分配給某些元素，並且由於父元素height是auto您的100%確實有效，但它的父項（默認設置爲auto）的值爲100%，而不是視口。

中序，使其100％，你需要設置的div所有父元素的height: 100%;視和自身在這種情況下，它應該是你的<div>元素，移動

html, body { 
    height: 100%; 
} 

.a_list { 
    width: 300px; 
    height: 100%; 
    list-style-type: disc; 
} 

.a_list li { 
    padding-left: 20px; 
}

避免編寫內嵌樣式他們到一個外部樣式表，然後使用height: 100%;，它現在應該工作。此外，您將不需要0屬性，因爲默認情況下它將具有滾動條。

Demo

請注意，如果您添加任何其他包裝元素你div，那麼你需要的是包裝元素的height設置爲100%爲好。

最後但並非最不重要，你可能不知道CSS Reset，所以你可能也需要。

來源

2015-04-19 07:03:27

謝謝！它的工作原因是你對視口概念的解釋！我並沒有完全意識到這一點。感謝您使用它的額外細節:-) – user1692342

@ user1692342歡迎您，我清理了一下您的標記，並將相同的細節添加 –

示例代碼沒有JS，你可以做這樣的：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
}

<div style="width: 300px; height:100%; overflow: auto"> 
 
    <ul> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    </ul> 
 
</div>

來源

2015-04-19 06:59:48 drip

雖然這是正確的答案，真的沒有必要的'*'。它改變了所有段落，標題，塊引用等的佈局。只需'html，body，div {height：100％;保證金：0}'會完成。 –

您需要將100％高度的父項添加到body/html標記以使div成爲窗口的100％。因此，請添加：

body, html { 
height: 100%; 
}

然後您可以根據需要將div更改爲100％高度。

來源

2015-04-19 07:05:12

如果你想爲div使用100％，那麼你必須使用body和html 100％。通常高度自動不是100％。

html,body{ 
height:100%;

}

來源

2015-04-19 07:12:14 Taslim

在div標籤內的無序列表的滾動條

回答

相關問題