Applying overflow hidden to body

Question

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
    width:100%; 
    height:100%;
}

body {
    overflow: hidden;
    height: 300px;
    border: 6px solid red;
}
</style>
</head>
<body>
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1>
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1>
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1>
</body>
</html>

This is my code. However, the "haha" inside the body overflow outside of body, regardless of the overflow:hidden property of body, and I don't know why.

Browser:Firefox 34.0.5

BoltClock · Answer 1 · 2014-12-28T18:54:51.377

In HTML, setting overflow only on the body element will have it affect the root element html instead of the body element, making it seem as though you never actually set it on the body element.

The CSS spec has the details on how this works (although this behavior is specific to HTML), but that is basically what is happening, and it is expected behavior, designed to cater to the much more common use case of controlling page scrollbars (so you would only have to set it on either element and not both). This means that it works the same way in all browsers.

You can prevent this from happening by also setting overflow on the html element; this is also stated in the spec. So you can either use a wrapper div, as mentioned by others, or you can set overflow: hidden or overflow: auto on html¹ so you don't have to use a wrapper:

html {
    width: 100%; 
    height: 100%;
    overflow: hidden;
}

body {
    overflow: hidden;
    height: 300px;
    border: 6px solid red;
}

¹ _{Note that setting overflow: visible is effectively the same thing as not setting it at all for most elements, because it's the initial value as defined by the spec.}

Caleb Lewis · Answer 2 · 2014-12-28T18:25:17.840

It's because you can't style the body like that.
Try putting the h1s inside a div and then giving that a height of 300 and an overflow hidden.
Like so

HTML

<div>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
    <h1>haha</h1>
</div>

CSS

    div {
        overflow:hidden;
        height: 300px;
        border: 6px solid red;
    }

score 0 · Answer 3 · answered Dec 28 '14 at 18:22

You have to add a div inside the body tag and put all your h1 inside it. Then apply your overflow: hidden to it.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
    width:100%; 
    height:100%;
}

body div{
    overflow: hidden;
    height: 300px;
    border: 6px solid red;
}
</style>
</head>
<body>
<div>
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1>
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1>
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1>
</div>
</body>
</html>

Applying overflow hidden to body

3 Answers3

Linked