[Web] Make a Scrollale Block

這裡我想列出一個明確的做法，有關於製作可捲動範圍的做法。

基礎

最基礎的東西就是對 display: block; 的元素加上 CSS 屬性 overflow-y: scroll; 。這個意思是，當內容超出上下邊界時，可以捲動。

如果我們是在一個 <div> 裡面做出捲動，會是怎樣呢？

<div style="oveflow-y: scroll;">
....<!-- 很多的內容 -->
</div>

改良

如果這個 <div> 的 parent 元素都是沒有限制寬高的，那他就會被展開，就不會有捲動了。你必須幫助他製作出 overflow-y 的情況，一種是在他的 parent 元素上面做限制，一種是在他本身做限制，這邊展示後者：

<div style="oveflow-y: scroll; height: 100px;">
....<!-- 很多的內容 -->
</div>

簡化成 CSS:

.scrollable-content {
    overflow-y: scroll;
    height: 100px;
}

所以可以改成：

<div class="scrollable-content">
....<!-- 很多的內容 -->
</div>

我自己的解讀是：我用來顯示內容的區塊（比方 <div>），如果有大小上的限制，使得裡面的內容比區塊大的時候（此處就是 height: 100px ）， overflow 用來決定這些內容該如何處理，如果要讓他可以捲動來看，那就是用 scroll 。