1.使用浮动的方式
效果图：
代码如下：(注意，此时.content的高度是500px，即父元素的高度，但是浮动元素在 .content 上方，盖住了 .content，将 .nav背景样式 改为 background-color: rgba(0,0,0,0.1);可观察到效果)
<!DOCTY PE ht ML >
<html>
<head>
< ;m eta charset="utf-8" />
<t IT le>高度充满父容器</title>
</head>
<style>
.parent {
h ei ght: 500px;
width: 300px;
border: 1px solid red ;/***/
padding: 2px 2px;/***/
}
.nav {
height: 100px;
width: 100%;/*必须,沾满 宽 度 防 止浮动 */
float: left;/*必须 */
background-color: red;
}
.content {
height:100%;/*必须*/
background-color: green;
}
</style>
<body>
<div class="parent">
<div class="nav">
固定高度
</div>
<div class="content">
自适应父容器, 充满剩余的空间
</div>
</div>
</body>
</html>@H_ 512 _13@
2.使用定位
代码如下：（推荐使用此种方法，没有上面的那种方法的缺点）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度充满父容器</title>
</head>
<style>
.parent {
position: relative;
height: 500px;
width: 300px;
border: 1px solid red;/***/
padding: 2px 2px;/***/
}
.nav {
height: 100px;
width: 100%;
background-color: red;
}
.content {
position:absolute;
top: 100px;
bottom: 0px;
background-color: green;
width: 100%;
}
</style>
<body>
<div class="parent">
<div class="nav">
固定高度
</div>
<div class="content">
自适应父容器, 充满剩余的空间
</div>
</div>
</body>
</html>
到此这篇关于CSS让子元素div的高度填满父容器的剩余空间的方法的 文章 就介绍到这了,更多相关CSS子元素div高度填满剩余空间内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 CSS让子元素div的高度填满父容器的剩余空间的方法 全部内容，希望文章能够帮你解决 CSS让子元素div的高度填满父容器的剩余空间的方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS让子元素div的高度填满父容器的剩余空间的方法的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201719