html body is smaller than its contents

2018-07-01 15:51:46

Here's a basic illustration of the problem:

<html><head><style type="text/css">
    html {width: 100%; height: 100%; background: red;}
    body {width: 100%; height: 100%; background: green;}
    
    .leftbar, .rightbar {height: 100%; background: blue;}

    .leftbar  {float: left;}
    .rightbar {float: right;}

    table {width: 100px; height: 800px; background: black; color: white;
           margin: 0 auto 0 auto;}
</style></head>
<body>
    <ul class="leftbar"><li>one</li><li>two</li></ul>
    <ul class="rightbar"><li>alpha</li><li>beta</li></ul>
    <table><tbody><tr><td>blah blah</td></tr></tbody></table>
</body>
</html>

We can immediately see that the floated ul elements are as tall as the body which contains them, the problem is that the body is not as tall as the table which it contains.

How do I make the body be big enough? In this example, I want the leftbar and rightbar to go all the way down, as far as scrolling allows, so you can never see any gap below them.

从body规则中删除height: 100% - 这会使身体与视口高度相比较高（小于内容高度）。

http://jsfiddle.net/6ZeLh/

To fix the body height not going all the way down change body{height:100%} to min-height:100% . If you care, this will not work in IE6. To fix your lists take the floats out. Add position:relative to the body , add position:absolute to .leftbar, .rightbar and set the positions as follows

.leftbar  {left:0; top:0;}
.rightbar {right:0; top:0;}

You can see it in the fiddle I linked above.

body{ height:100%; }

This appears to be a misunderstanding of the code. A "100%" height is relative to something. In other words "100% of what?"

What this does is set body = the size of the window. in JSFiddle, it's the size of the rendered box. On a browser, it would be 100% of the viewing window.

So, if shrink your browser window down to a tiny view space, 100% height will be 100% of the tiny size. Which is accurate.

If you have content that's longer than that, well you run into the issues you see in your example. Recall that the table is a child element, not a parent container. CSS inherits from parents, not children. So you have to make sure BODY remains dynamic in it's height setting.

update

Here's a JSFiddle for min-height on body; http://jsfiddle.net/uZCKn/1/ It need HTML height to be 100% to work. Got that from here: min-height does not work with body

The only thing I can think of is a JavaScript to set the height of the side bars or to use faux-columns. But there could be something else going on to get the left/right bar to fill it's containers height as well that I'm missing.

There's part of an explanation.

链接地址: http://www.djcxy.com/p/88280.html

上一篇: 将父母<div>展开到其子女的身高

下一篇: html正文小于其内容