Question

让我们说这个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;
}

如果你查看结果，那么你可以看到here正文不在html标签中，＃main是在身体和html标签之外..我怎么能让所有元素都不能超出父高度？所以我希望结果是这样的：

enter image description here

Answer 1

首先，body的默认边距为8px;

首先重置这些。

body {
    margin:0px;
}

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

这将解决html / body的问题。现在，对于#main - 出现这种情况的原因，是因为30px nav被置于其外部。 #main实际上是100％，但在100%下是30px，这就是您看到差距的原因。

Updated jsFiddle here

子元素离开父母

1 个答案: