Html 使一段简单的网页有自己的滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14380442/
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
Make one section of simple web page have own scroll bar
提问by lip1
I have a section of the web page I am building that is dedicated to news events. These are simply entered as follows currently.
我正在构建的网页中有一个专用于新闻事件的部分。目前这些只是简单地输入如下。
<tr>
<td class="newsdate">
February 2013
</td>
<td class="news">
News item 1
</td>
</tr>
<tr>
<td class="newsdate">
January 2013
</td>
<td class="news">
News items 2
</td>
</tr>
I would like to have it so that when there are more than 5 events listed, say, then you can use a scroll bar to see old events. That is the height of the news section will be fixed but you can scroll up and down within it to see newer and older news. How can you do this most simply?
我想拥有它，以便当列出的事件超过 5 个时，例如，您可以使用滚动条查看旧事件。这是新闻部分的高度将是固定的，但您可以在其中上下滚动以查看新旧新闻。你怎么能最简单地做到这一点？
回答by Hieu Le
Wrap your tablein a divusing overflow-y: auto;like this
包装你table在div使用overflow-y: auto;这样的
HTML
HTML
<div class="scrollable">
<!-- Your table -->
</div>
CSS
CSS
.scrollable {
height: 100px; /* or any value */
overflow-y: auto;
}
回答by Morpheus
Use CSS:
使用 CSS：
.scrollbar {
height: 100px;
overflow: auto; // here is the magic :)
}
回答by estrar
HTML example markup:
HTML 示例标记：
<ul id="container">
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
<li>Article 4</li>
<li>Article 5</li>
<li>Article 6</li>
<li>Article 7</li>
<li>Article 8</li>
</ul>
and CSS:
和 CSS：
ul#container {
height: 100px;
overflow-y: auto;
}
回答by Nathan MacInnes
If your news events are wrapped in a <table id="news">, then your CSS would look like this:
如果您的新闻事件包含在 中<table id="news">，那么您的 CSS 将如下所示：
#news {
height: 200px;
overflow-y: auto;
}
回答by Allie
Place your table inside a DIV element and specify a height, like this:
将您的表格放在 DIV 元素内并指定高度，如下所示：
<div style="height:400px;overflow:auto">
<table>....</table>
</div>
It will be automatically scrolled if needed
如果需要，它将自动滚动
