Html 如何垂直创建可滚动的 Div 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2295766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a scrollable Div Tag Vertically?
提问by Reza Rasouli
I want to create a scrollable div tag with a fixed height that gets a vertical scroll bar. I'm trying to get this to work in chrome.
我想创建一个具有固定高度的可滚动 div 标签，该标签具有垂直滚动条。我试图让它在 chrome 中工作。
This is my CSS:
这是我的 CSS：
#designDiv
{
width:249px;
height:299px;
background-color:Gray;
overflow-y: scroll;
max-width:230px;
max-height:100px;
}
It does show the vertical scroll bar but the problem is during the run-time when the user adds some content to the #designDiv. It does not scroll and the #designDivbegins to expand vertically.
它确实显示了垂直滚动条，但问题是在运行时用户向#designDiv. 它不滚动并且#designDiv开始垂直扩展。
How do I create a scrollable div tag vertically for chrome?
如何为 chrome 垂直创建可滚动的 div 标签？
回答by David says reinstate Monica
Well, your code worked for me (running Chrome 5.0.307.9 and Firefox 3.5.8 on Ubuntu 9.10), though I switched
好吧，您的代码对我有用（在 Ubuntu 9.10 上运行 Chrome 5.0.307.9 和 Firefox 3.5.8），尽管我切换了
overflow-y: scroll;
to
到
overflow-y: auto;
Demo page over at: http://davidrhysthomas.co.uk/so/tableDiv.html.
演示页面在： http://davidrhysthomas.co.uk/so/tableDiv.html。
xhtml below:
下面的xhtml：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Div in table</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css" media="all">
th {border-bottom: 2px solid #ccc; }
th,td {padding: 0.5em 1em;
margin: 0;
border-collapse: collapse;
}
tr td:first-child
{border-right: 2px solid #ccc; }
td > div {width: 249px;
height: 299px;
background-color:Gray;
overflow-y: auto;
max-width:230px;
max-height:100px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<table>
<thead>
<tr><th>This is column one</th><th>This is column two</th><th>This is column three</th>
</thead>
<tbody>
<tr><td>This is row one</td><td>data point 2.1</td><td>data point 3.1</td>
<tr><td>This is row two</td><td>data point 2.2</td><td>data point 3.2</td>
<tr><td>This is row three</td><td>data point 2.3</td><td>data point 3.3</td>
<tr><td>This is row four</td><td><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies mattis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum a accumsan purus. Vivamus semper tempus nisi et convallis. Aliquam pretium rutrum lacus sed auctor. Phasellus viverra elit vel neque lacinia ut dictum mauris aliquet. Etiam elementum iaculis lectus, laoreet tempor ligula aliquet non. Mauris ornare adipiscing feugiat. Vivamus condimentum luctus tortor venenatis fermentum. Maecenas eu risus nec leo vehicula mattis. In nisi nibh, fermentum vitae tincidunt non, mattis eu metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel est purus. Ut accumsan, elit non lacinia porta, nibh magna pretium ligula, sed iaculis metus tortor aliquam urna. Duis commodo tincidunt aliquam. Maecenas in augue ut ligula sodales elementum quis vitae risus. Vivamus mollis blandit magna, eu fringilla velit auctor sed.</p></div></td><td>data point 3.4</td>
<tr><td>This is row five</td><td>data point 2.5</td><td>data point 3.5</td>
<tr><td>This is row six</td><td>data point 2.6</td><td>data point 3.6</td>
<tr><td>This is row seven</td><td>data point 2.7</td><td>data point 3.7</td>
</body>
</table>
</div>
</body>
</html>
回答by Eric Leschinski
This code creates a nice vertical scrollbarfor me in Firefoxand Chrome:
这段代码在Firefox和Chrome 中为我创建了一个很好的垂直滚动条：
CSS:
CSS：
#answerform{
position: absolute;
border: 5px solid gray;
padding: 5px;
background: white;
width: 300px;
height: 400px;
overflow-y: scroll;
}
HTML:
HTML：
<div id='answerform'>
badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
mushroom<br><br>mushroom<br><br>
a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
</div>
Here is a JS fiddle demoproving the above works.
这是证明上述作品的JS 小提琴演示。
回答by Lennart Paasse
Adding overflow:autobefore setting overflow-yseems to do the trick in Google Chrome.
overflow:auto在设置之前 添加overflow-y似乎可以在 Google Chrome 中解决问题。
{
width:249px;
height:299px;
background-color:Gray;
overflow: auto;
overflow-y: scroll;
max-width:230px;
max-height:100px;
}
