子元素脱离父元素
生物
可以说我们有这个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标签。如何使所有元素都超出父级高度？所以我希望结果是这样的：
乔什·克罗齐耶（Josh Crozier）
一方面，body它的默认边距为8px;
首先重置它们。
body {
margin:0px;
}
此外，borders不会将高度计算在内，而是将它们相加。因此，高度实际上是100％+ 2px边框。您可以通过添加来更改此设置box-sizing: border-box;。
这将解决html/的问题body。现在，#main发生这种情况的原因是，将a30px nav放置在其外部。#main实际上是100％，但是100%低于30px，这就是为什么您看到差距。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
子元素脱离父元素
- 2
选择父元素的子元素
- 3
子元素溢出父元素
- 4
子元素裁剪父元素？
- 5
反应使元件脱离元素
- 6
当 <a> 元素作为子元素时 <nav> 元素移出父元素
- 7
子元素自动宽度（大于父元素）
- 8
根据子元素的值获取父元素
- 9
遍历父元素循环的子元素
- 10
CSS专注于子元素更改父元素
- 11
子元素在父元素中的jQuery索引
- 12
找出子元素是否在父元素之外
- 13
高度小于子元素的父元素
- 14
新的子元素包含父元素
- 15
从Appium的子元素中获取父元素
- 16
CSS在父元素上扩展子元素
- 17
选择子元素而不选择父元素
- 18
新的子元素包含父元素
- 19
jQuery选择父元素的子元素
- 20
遍历父元素循环的子元素
- 21
子元素位于父页脚元素之外
- 22
查找父元素的子元素是否存在
- 23
父元素不跟随子元素
- 24
javascript 添加子元素和父元素
- 25
删除带有子元素的父元素
- 26
根据子元素的值隐藏父元素
- 27
父div之外的子元素
- 28
包含子元素的父容器
- 29
子元素悬停，效果父
我来说两句