製作一個div垂直滾動使用CSS

Question

這

<div id="" style="overflow:scroll; height:400px;">

給出了div用戶可以在無論是在水平和垂直滾動。我如何改變它，使得div是只有可以垂直滾動嗎？

Answer 1

您已經使用了錯誤的屬性。滾動條可以用任何屬性overflow,overflow-x或overflow-y觸發，並且每個可以設置爲visible，hidden,scroll,auto或inherit中的任何一個。目前您正在尋找這兩個：

• auto - 該值將着眼於框的寬度和高度。如果它們被定義了，它不會讓這個方框超出這些邊界。相反（如果內容超出了這些邊界），它將創建一個超出其長度的邊界（或兩者）的滾動條。

• scroll - 這個值力量滾動條，無論什麼時候，即使含量不超過邊界集。如果內容不需要滾動，則欄會顯示爲「禁用」或非交互式。

如果總是要垂直滾動條顯示：

您應該使用overflow-y: scroll。這個強制滾動條出現在垂直軸上，無論它是否需要。如果您無法實際滾動上下文，它將顯示爲「禁用」滾動條。

如果你只想要一個滾動條出現，如果你可以滾動框：

只需使用overflow: auto。由於默認情況下，當您的內容無法放入當前行時，它會跳至下一行，因此不會創建水平滾動條（除非它位於禁用封閉字符的元素上）。對於垂直條，它將允許內容擴展到您指定的高度。如果超過該高度，它將顯示一個垂直滾動條來查看其餘內容，但如果它沒有超過高度，則不會顯示滾動條。

Answer 2

試試這個。

<div style="overflow-y: scroll; height:400px;">

Answer 3

上使用DIV overflow-y: auto;。

此外，你應該設置寬度。

Answer 4

您可以改用此代碼。

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;"> 

溢出-X：溢出-X屬性指定如何處理內容的左/右邊緣 - 如果它溢出的元素的內容區域。
overflow-y：overflow-y屬性指定如何處理內容的頂部/底部邊緣 - 如果它溢出元素的內容區域。

值
可見：默認值。內容未被剪裁，並且可能會在內容框外呈現。
隱藏：內容被剪輯 - 並且不提供滾動機制。
滾動：剪裁內容並提供滾動機制。
auto：應該爲溢出框提供滾動機制。
初始值：將此屬性設置爲其默認值。
繼承從其父元素繼承此屬性。

Answer 5

對我來說，所有這些答案的問題是他們沒有響應。我不得不有一個固定的高度爲父母的div，我不想要。我也不想花費大量的時間與媒體查詢喋喋不休。如果你正在使用angular，你可以使用bootstraps tabset，它會爲你做所有的辛苦工作。您將能夠滾動內部內容，並且它會響應。當你設置標籤時，像這樣做：$scope.tab = { title: '', url: '', theclass: '', ative: true }; ......重點是，你不需要標題或圖像圖標。然後隱藏標籤的輪廓在CS這樣的：.nav-tabs { border-bottom:none; }也是這個.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} 終於卸下隱形標籤，你仍然可以點擊，如果你不實現這個：.nav > li > a {padding:0px;margin:0px;}

Answer 6

100％的視區的高度使用：

overflow: auto; 
max-height: 100vh; 

Answer 7

您可以使用overflow-y: scroll進行垂直滾動。

<div style="overflow-y:scroll; height:400px; background:gray"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
</div>