CODEWITHSUNDEEP
htmlcss
user3050499
user3050499

Reputation:

why would someone write overflow: hidden on <html> tag

I was reading source code of an template and i got code

<html class="js" style="overflow: hidden">

My question is why would someone will apply overflow:hidden on html tag. what benefit it will give.`

Upvotes: 8

Views: 10439

Answers (4)

ezeikel
ezeikel

Reputation: 97

This disables the page from scrolling. So for example when you might open an overlay on a page and you would like to be able to scroll the overlay content but not scroll the page behind it at the same time.

In this case you might add a class onto the html element that sets 'overflow:hidden' when you click a button to open the modal, then remove that class when you click the close button on the modal.

The modal would have to have a fixed position for this to work.

Upvotes: 1

Dennis Fagan
Dennis Fagan

Reputation: 551

Overflow hidden can be used to clear floats http://jsfiddle.net/PRwVT/1/ add 

.wrapper {
    border: 1px solid;
    padding: 3px;
    background: red;
    overflow: hidden;
}

to overwrite the .wrapper class in that fiddle and you will see what I mean. That being said the only element that could have floats and be a direct child of the html element is the body tag.

Upvotes: 2

MattDiamant
MattDiamant

Reputation: 8771

It's most likely to remove all scroll bars.

When you set overflow: hidden, anything that is outside of the element is hidden, obviously. What this does when you attach it to the html element is hides everything that is not on the screen. The browser then sees that because everything that is not on the screen is hidden, there is nowhere to scroll to, so it hides the scroll bars.

Templates that want a clean, full browser look will remove scroll bars if they feel that there is nothing that the user should need to scroll to.

Upvotes: 3

scrblnrd3
scrblnrd3

Reputation: 7416

You would use overflow:hidden when you have dynamic, responsive content, for the most part, or at least, that is what I use it for. For example, if you have a page with content that grows in height as you shrink the page, you may want to just hide whatever is not visible in the regular height of the div

Upvotes: 3

Related Questions