CSS設定滿版的方法

我們知道用CSS中設定
html, body {
height: 100%;
}
可以完成滿版的效果.但為什麼要這麼做?
以下兩篇文章可以當做參考:
TIPS-Get 100% Height in XHTML

100% Table Height

資料來源：How to Create a Scroll Bar using CSS

How to Create a Scroll Bar Using CSS

A frequently asked question is how to create a box with a scroll bar for displaying content. Okay, I'll tell you, but first I have to rant a bit. I just hate those little scrolling boxes. Now this is just my opinion and it's a gross over generalized one at that, but I believe that most people who want this functionality simply don't understand how web pages work. They design some lovely layout in an image editor with beautiful graphics on the left, right, top, and bottom. Everything is sliced to perfection. Now, when they start adding real content to the page, it starts pulling the graphics apart. You can read more about the exploding tables phenomenon in my rant about spans.
Since they don't understand how web pages work, they believe that, instead of fixing the page to properly display the content, they should limit the size of the content by creating a scroller. This just makes the site harder to use. Printing becomes a problem because only the visible portion of the scroller's content prints. In some browsers, the mouse wheel will not scroll the content properly. And the poor users wind up with multiple scroll bars if their browser window isn't large enough to display the full page, which just leads to a confusing interface. In almost all cases, this is simply bad web design.
Okay, I feel better now. <smile>
You can use CSS to create a scrollable box. Consider this source code:

<div style="width: 190px; height: 190px; overflow: auto; padding: 5px">
      content in here
   </div>

Here is what that would look like and try to imagine reading this article if the entire text were in that little box:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent tempus rutrum wisi. Proin dui libero, tempor non, mattis nec, imperdiet a, nulla. Nunc hendrerit, metus eget sodales interdum, ipsum felis lacinia elit, vel bibendum nunc ligula ac wisi. Donec vitae neque. Nam quis ante ut est viverra aliquet. Vestibulum dui. Phasellus ultricies elit nec nibh. Sed pede tortor, tincidunt a, vestibulum id, posuere quis, eros. Vestibulum quam. Nullam augue. Nullam eleifend turpis a augue. Aenean vestibulum. Quisque et velit eu diam consequat nonummy. Nullam volutpat enim et pede.
Fusce pretium. Sed sodales arcu eu nulla. Nunc dapibus dui nec tortor. Ut hendrerit dolor sit amet pede. Proin sit amet lorem. Vestibulum quis ligula. Quisque leo libero, pharetra at, porttitor at, mollis imperdiet, magna. Donec venenatis neque quis arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim nibh, euismod et, gravida id, euismod et, lacus. Praesent consectetuer velit non neque. Nulla vehicula, arcu tincidunt vehicula ullamcorper, neque sapien iaculis ipsum, sit amet suscipit mi pede vitae augue. Cras tempor, arcu molestie porta pharetra, pede ipsum faucibus nisl, sit amet eleifend urna ante vel nibh. Cras egestas bibendum mauris. Etiam sit amet risus a magna sagittis faucibus.
In ante. Nunc aliquet tincidunt sem. Morbi vestibulum lectus eget tortor. Integer volutpat. Mauris vitae erat quis neque tempor faucibus. Duis mattis. Duis nec magna. Aliquam tristique mattis lorem. Morbi gravida. Nunc malesuada velit id enim. Nullam sit amet dolor eget orci dignissim imperdiet. Morbi viverra neque vitae magna. Sed nonummy. Sed nunc risus, dignissim consectetuer, hendrerit vel, dapibus at, risus. Mauris id neque sit amet augue pretium blandit. Sed sit amet nunc. Sed fermentum tristique nibh. Proin pellentesque tincidunt risus. Aenean erat. In blandit aliquam massa.

That's all there is to it. You can put this in the body of a page, or you can place it inside another container, like a table for example. If you have a good valid reason for using a scroller, use it. If all you're doing is protecting a flawed design, consider fixing the design.

CSS語法應用 - overflow控制捲軸

資料來源：木笛雅設
捲軸控制在網頁設計上算是滿常碰到的問題
尤其當div排版的方法逐漸成為主流時
善用overflow就能有效的的掌握各種捲軸效果