<body> with overflow:scroll not behaving as expected
Look at the following image and code:
<!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.
加载中,请稍侯......
精彩评论