<body> with overflow:scroll not behaving as expected_问答_开发者

<body> with overflow:scroll not behaving as expected

开发者 https://www.devze.com 2023-02-10 17:07 出处：网络

Look at the following image and code: <!doctype html> <html> <head> <style> body {

相关专题：css

Look at the following image and code:

<body> with overflow:scroll not behaving as expected

<!doctype html>

<html>
    <head>
        <style>
            body {
                border: 1px solid red;
                padding: 20px;
                overflow: scroll;
 开发者_高级运维           }
        </style>
    </head>

    <body></body>
</html>

The overflow: scroll inserts scroll bars inside the element, but the <body> element doesn't occupy the entire webpage, what is wrong with the scroll bars?

Thanks

overflow:scroll will add scrollbars whether the body is bigger than the window or not. You are probably looking for overflow:auto;

The body tag is kind of a special case. Most style rules applied to the body tag apply to the whole window, regardless of tho body's "size". For the behavior you want (a scrollbar inside a box), you'll need to use a div or some other block-level element inside of the body.

You need to use overflow: auto; instead of overflow: scroll; Check it out here. http://jsfiddle.net/w6B6z/

The body height is not set to 100%. Even with the body height set to 100%, for this to work correctly, you need to call a few items in CSS to make it all work out cross browser.

Look to 100% Height Layout Using CSS for the details.