css div高度填满父容器剩余空间

转自：http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html

1.要实现的效果图:css div高度填满父容器剩余空间

css div高度填满父容器剩余空间

描述:css div高度填满父容器剩余空间

如上图 ,红色部分固定高度100px ,绿色部分高度充满父容器剩余部分,高度为父容器高度-红色高度

实现代码一(最通俗的方式):

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>高度充满父容器</title>  
  6.     </head>  
  7.     <style>  
  8.         .parent {  
  9.             height: 500px;  
  10.             width: 300px;  
  11.             border: 1px solid red;/***/  
  12.             padding: 2px 2px;/***/  
  13.         }  
  14.           
  15.         .nav {  
  16.             height: 100px;  
  17.             width: 100%;/*必须沾满宽度防止浮动*/  
  18.             float: left;/*必须*/  
  19.             background-color: red;  
  20.         }  
  21.           
  22.         .content {  
  23.             height:100%;/*必须*/  
  24.             background-color: green;  
  25.         }  
  26.     </style>  
  27.   
  28.     <body>  
  29.           
  30.         <div class="parent">  
  31.             <div class="nav">  
  32.                 固定高度  
  33.             </div>  
  34.             <div class="content">  
  35.                 自适应父容器, 充满剩余的空间   
  36.             </div>  
  37.         </div>  
  38.   
  39.     </body>  
  40.   
  41. </html>  
解释:css div高度填满父容器剩余空间

.nav固定高度 ,必须设置左浮动float:left .且其宽度为100%充满父容器宽度

.content 设置height:100% 就自适应充满剩余空间

实现代码二(相对,绝对定位):css div高度填满父容器剩余空间

[html] view plain copy
  1. .parent {  
  2.             position: relative;  
  3.               
  4.             height: 500px;  
  5.             width: 300px;  
  6.             border: 1px solid red;/***/  
  7.             padding: 2px 2px;/***/  
  8.         }  
  9.           
  10.         .nav {  
  11.             height: 100px;  
  12.             width: 100%;  
  13.             background-color: red;  
  14.         }  
  15.           
  16.         .content {  
  17.             position:absolute;  
  18.             top: 100px;  
  19.             bottom: 0px;  
  20.               
  21.             background-color: green;  
  22.             width: 100%;  
  23.         }  
解释: css div高度填满父容器剩余空间
css div高度填满父容器剩余空间

父容器设置position:relative ,

需要自适应的容器设置postion:absolute ,top:100px(固定高度容器.nav的高度) ,bottom:0px(与父容器底部)

转自：http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html

1.要实现的效果图:css div高度填满父容器剩余空间

css div高度填满父容器剩余空间

描述:css div高度填满父容器剩余空间

如上图 ,红色部分固定高度100px ,绿色部分高度充满父容器剩余部分,高度为父容器高度-红色高度

实现代码一(最通俗的方式):

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>高度充满父容器</title>  
  6.     </head>  
  7.     <style>  
  8.         .parent {  
  9.             height: 500px;  
  10.             width: 300px;  
  11.             border: 1px solid red;/***/  
  12.             padding: 2px 2px;/***/  
  13.         }  
  14.           
  15.         .nav {  
  16.             height: 100px;  
  17.             width: 100%;/*必须沾满宽度防止浮动*/  
  18.             float: left;/*必须*/  
  19.             background-color: red;  
  20.         }  
  21.           
  22.         .content {  
  23.             height:100%;/*必须*/  
  24.             background-color: green;  
  25.         }  
  26.     </style>  
  27.   
  28.     <body>  
  29.           
  30.         <div class="parent">  
  31.             <div class="nav">  
  32.                 固定高度  
  33.             </div>  
  34.             <div class="content">  
  35.                 自适应父容器, 充满剩余的空间   
  36.             </div>  
  37.         </div>  
  38.   
  39.     </body>  
  40.   
  41. </html>  
解释:css div高度填满父容器剩余空间

.nav固定高度 ,必须设置左浮动float:left .且其宽度为100%充满父容器宽度

.content 设置height:100% 就自适应充满剩余空间

实现代码二(相对,绝对定位):css div高度填满父容器剩余空间

[html] view plain copy
  1. .parent {  
  2.             position: relative;  
  3.               
  4.             height: 500px;  
  5.             width: 300px;  
  6.             border: 1px solid red;/***/  
  7.             padding: 2px 2px;/***/  
  8.         }  
  9.           
  10.         .nav {  
  11.             height: 100px;  
  12.             width: 100%;  
  13.             background-color: red;  
  14.         }  
  15.           
  16.         .content {  
  17.             position:absolute;  
  18.             top: 100px;  
  19.             bottom: 0px;  
  20.               
  21.             background-color: green;  
  22.             width: 100%;  
  23.         }  
解释: css div高度填满父容器剩余空间
css div高度填满父容器剩余空间

父容器设置position:relative ,

需要自适应的容器设置postion:absolute ,top:100px(固定高度容器.nav的高度) ,bottom:0px(与父容器底部)

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode