CODEWITHSUNDEEP
cssbrowserscrollbaroverflowdefault
Alvaro
Alvaro

Reputation: 9682

Is overflow auto in a page applied to HTML or BODY, by default?

In a simple page where there is no overflow property specified, if the content overflows the window scrollbars appear.

Is the overflow: auto or scroll applied by the browser by default to the HTML or to the BODY element?

Example:

div {
  height: 200vh;
  border: 10px solid;
}
<div></div>

Upvotes: 4

Views: 2108

Answers (2)

roberrrt-s
roberrrt-s

Reputation: 8210

overflow is always defaulted to visible on every element on which it is not specified.

The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.

Using the overflow property with a value different to visible (its default) will create a new block formatting context. This is technically necessary — if a float intersected with the scrolling element it would forcibly rewrap the content. The rewrap would happen after each scroll step, leading to a slow scrolling experience.

visible is however, different from scroll which enforces scrolling bars, even when no clipping occurs. Visible allows the content to be rendered outside the viewport, and allows scrolling bars to appear whenever content is overflowing the initial viewport.

In your example, body is the reason for the scrollbars. Your body's content is rendered outside of the viewport (the div inside it). Therefore, it automatically displays scrolling bars, specific to the body- the scrolling bars are being rendered on the viewport instead of the element itself.

Example:

html, body {
  width: 200px;
  height: 200px;
}

div {
  background-color: #F00;
  width: 300px;
  height: 300px;
}
<div></div>

Quote is from: https://developer.mozilla.org/nl/docs/Web/CSS/overflow

Upvotes: 3

ab29007
ab29007

Reputation: 7756

Its default value is overflow:visible;

The overflow property controls what happens to content that breaks outside of its bounds. here's what you can set it to:

  • visible: content is not clipped when it proceeds outside its box. This is the default value of the property.
  • hidden: overflowing content will be hidden.
  • scroll: similar to hidden except users will be able to scroll through the hidden content. scroll-bar appear even if no content is there to scroll through.
  • auto: if the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content.
  • initial: uses the default value which is visible
  • inherit: sets the overflow to the value of its parent element.

Here are some good resources :

http://www.w3schools.com/jsref/prop_style_overflow.asp

https://developer.mozilla.org/en/docs/Web/CSS/overflow

Upvotes: 0

Related Questions