Question

我正在构建一个专门用于新闻事件的网页部分。这些只是目前输入如下。

<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>

我想拥有它，以便当列出超过5个事件时，您可以使用滚动条查看旧事件。这是新闻部分的高度将被修复但你可以在其中向上和向下滚动以查看更新和更旧的新闻。你怎么能这么简单地做到这一点？

Answer 1

使用table这样的div将overflow-y: auto;包裹在<{1}}中

HTML

<div class="scrollable">
    <!-- Your table -->
</div>

CSS

.scrollable {
    height: 100px; /* or any value */
    overflow-y: auto;
}

Answer 2

使用CSS：

.scrollbar {
  height: 100px;
  overflow: auto; // here is the magic :)
}

Answer 3

如果您的新闻事件包含在<table id="news">中，那么您的CSS将如下所示：

#news {
    height: 200px;
    overflow-y: auto;
}

Answer 4

将表放在DIV元素中并指定高度，如下所示：

<div style="height:400px;overflow:auto">
   <table>....</table>
</div>

如果需要，它将自动滚动

Answer 5

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>

和CSS：

ul#container {
    height: 100px; 
    overflow-y: auto;
}

http://jsfiddle.net/UvsrY/4/

使一段简单的网页有自己的滚动条

5 个答案: