新教程:CSS让子元素div的高度填满父容器的剩余空间的方法
1.使用浮动的方式
效果图：
代码如下：(注意，此时.content的高度是500px，即父元素的高度，但是浮动元素在 .content 上方，盖住了 .content，将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>高度充满父容器</title> </head> <style> .parent { height: 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> 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的高度填满父容器的剩余空间的方法的内容到这里就结束了，喜欢的话可以给我们点赞鼓励~
