div滾動條未出現

Question

我很少使用css，但我認為以下內容應創建一個可滾動區域。 相反，它似乎只是隱藏所有不適合但無法滾動的文本。 在chrome / ie / firefox中，行為似乎相同，所以我猜我在做錯什么。

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Foo</title>
  </head>
  <body>
    <div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
    </div>
  </body>
</html>

style.css

#history {
    height: 200px;
    width: 200px;
    border: 1px solid #666;
    padding: 8px;
}

.scroll-area {
    overflow-style: auto;
    overflow: hidden;
}

非滾動圖片示例

Answer 1

你應該明確地設置overflow到auto （或scroll ，如果你需要滾動條出現在所有的時間）：

.scroll-area {
    overflow: auto;
}

演示： http : //jsfiddle.net/aNTHx/

Answer 2

好吧，您使用的是overflow-style ，這在任何主流瀏覽器中都還不支持。

將overflow設置為自動或在.scroll-area上滾動將使垂直滾動條按預期顯示

http://jsfiddle.net/kRcaR/1/

Answer 3

您需要設置overflow: auto或者如果您只想讓y軸滾動overflow-y: auto; overflow-x: hidden overflow-y: auto; overflow-x: hidden ;

Answer 4

您的div應該具有以下溢出樣式以進行垂直滾動：

.scroll-area {
  overflow-y: scroll;
}

或者，如果您想水平滾動：

.scroll-area {
  overflow-x: scroll;
}

Answer 5

您隱藏帶有overflow: hidden;的滾動條overflow: hidden; 。

如果更改為：

.scroll-area {
    overflow-style: auto;
    overflow: auto;
}

Answer 6

的HTML

<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place
</div>

的CSS

#history {
    height: 200px;
    width: 200px;
    border: 1px solid #666;
    padding: 8px;
}

.scroll-area {
    overflow-style: auto;
    overflow: scroll;
}

演示

http://jsfiddle.net/YxsLc/1/

說明

如果要滾動html元素中的內容，則應使用屬性overflow: scroll

Goodluck在將來的代碼中。

div滾動條未出現

問題描述

6 個解決方案

解決方案1
2 2013-04-25 17:15:41

解決方案2
2 已采納 2013-04-25 17:16:43

解決方案3
1 2013-04-25 17:16:26

解決方案4
1 2013-04-25 17:16:34

解決方案5
1 2013-04-25 17:17:05

解決方案6
1 2013-04-25 17:20:08

div滾動條未出現

問題描述

6 個解決方案

解決方案1 2 2013-04-25 17:15:41

解決方案2 2 已采納 2013-04-25 17:16:43

解決方案3 1 2013-04-25 17:16:26

解決方案4 1 2013-04-25 17:16:34

解決方案5 1 2013-04-25 17:17:05

解決方案6 1 2013-04-25 17:20:08

解決方案1
2 2013-04-25 17:15:41

解決方案2
2 已采納 2013-04-25 17:16:43

解決方案3
1 2013-04-25 17:16:26

解決方案4
1 2013-04-25 17:16:34

解決方案5
1 2013-04-25 17:17:05

解決方案6
1 2013-04-25 17:20:08