overflow: hidden on div and body, different behavior

Question

Given this html:

I want #b to

Answer 1

The overflow property has certain special behaviors specific to HTML's html and body elements, which are described in the CSS2.1 spec. These special cases are in place to accommodate changing overflow settings on the entire page in normal circumstances so authors simply need to set it on either html or body, but not both.

In this case, when you apply overflow: hidden to body, it actually affects the viewport instead of body (you can see this by resizing the preview pane to make it shorter — no scrollbars will appear on the preview pane itself). This causes #b to overflow the body normally even though you give it a fixed height that's less than the sum of #a and #b. In other words, it's as though you never set it on the body in the first place.

If you set overflow to something other than visible on html, though, this causes the viewport to use the value given to html instead of body, thereby leaving the declaration on body unaffected and allowing it to behave the same way as the wrapper:

html {
  overflow: auto;
}

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

jsFiddle preview

Answer 2

Body element is considered as main parent element inside which other elements that are displayed within the browser window resides therefore, width and height property is not applicable onto it. According to the best practices it is better to create a div container like #wrapper that you did in your second example.

Answer 3

body and div have totally different of them. In my daily working, I like constructing my code like this.

<div class='xxx-ctn'>
  <div class='xxx-inner'>
    <div class='data-wrapper'>
      [p|ul|ol|h1-h6|article|section].....
    </div>
  </div>
</div>

Okey, I missing your founding, but I think this is a good coding habbit.