2

假设我们有这个 html：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="navbar"></div>
    <div id="main">
        <textarea id="input"></textarea>
        <textarea id="output"></textarea>
    </div>
</body>
</html>

这个CSS：

html,body,#main{
    height:100%;
}

html{ border: 1px solid red; }
body{ border: 1px solid green; }
#main{ border: 1px solid blue; }
#navbar{ height: 30px; }

textarea{
    width: 45%;
    height: 60%;
    resize: vertical;
}

#input{
    float: left;
}

#main{
    float: right;
}

如果您查看结果，那么您可以在这里看到body 超出了 html 标记，#main 超出了 body 和 html 标记。我怎样才能使所有元素不超出父级高度？所以我希望结果是这样的：

在此处输入图像描述

4

1 回答 1

2

一方面，body默认边距为8px;

首先重置那些。

body {
    margin:0px;
}

此外，borders不计算到高度中，而是添加它们。因此高度实际上是 100% + 2px 边框。您可以通过添加来更改它box-sizing: border-box;。

这将解决html/的问题body。现在，因为#main- 发生这种情况的原因是因为 a30px nav被放置在它之外。#main实际上是 100%，但是100%低于30px，这就是为什么你看到了差距。

在这里更新了 jsFiddle

于 2013-10-13T04:57:38.473 回答