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

最新推荐文章于 2023-11-06 16:55:55 发布
最新推荐文章于 2023-11-06 16:55:55 发布
阅读量5.7k 收藏 3
点赞数
分类专栏： web前端

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

1.要实现的效果图:微笑


描述:吐舌头

如上图 ,红色部分固定高度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>  
解释: 偷笑

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

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

实现代码二(相对,绝对定位):大笑

[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.         }  
解释: 难过

父容器设置position:relative ,

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

JackLiu16
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现div的高度填满剩余空间_css深入浅出
weixin_30345873的博客
11-29 2554
文档流：文档内元素的流动方向内联元素从左往右块级元素从上往下block，inline，inline-block 元素的区别：block 元素独占一行，宽度占满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 <p> 只能包含 inlin...
掌握CSS弹性盒：布局的未来已来
最新发布
07-24
/* 项目可以伸缩以填满空间 */ margin: 10px; /* 项目之间的间隔 */ } ``` ```html <div class="container"> <div class="item">项目 1</div> <div class="item">项目 2</div> <div class="item">项目 3</div>...
CSS让子元素div的高度填满父容器的剩余空间的方法
11-06 7874
原帖：https://pythonjishu.com/unbayyjtzdjeewe/以下是详细讲解 CSS 让子元素 div 的高度填满父容器的剩余空间的方法的完整攻略。
CSS让子元素div的高度填满父容器的剩余空间
热门推荐
朽木自雕的博客
12-04 2万+
1.使用浮动的方式 效果图： 代码如下：(注意，此时.content的高度是500px，即父元素的高度，但是浮动元素在 .content 上方，盖住了 .content，将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果) <!DOCTYPE html> <html> <head> &lt...
css实现div填充剩余空间
月下lk山人的博客
09-08 2166
要求：A盒子高度自适应，B盒子填充完剩下的空间 实现方案：将A和B的父元素固定大小，内部由弹性布局实现
CSS的box-align属性控制子元素布局实例
09-24
5. **stretch**：这是`box-align`的默认值，子元素将沿垂直方向拉伸，以填满整个容器的高度，除非子元素有固定的高度。 ### 居中对齐 在CSS3中，`box-align`和`box-pack`属性通常一起使用来实现子元素的水平和垂直...
css设置多列等高布局的方法示例
09-22
`align-items`属性控制flex项在侧轴（默认是垂直方向）上的对齐方式，`stretch`是默认值，会拉伸元素以填满整个容器。以下是一个示例： ```css .box { display: flex; } .left { width: 300px; background-...
Flexbox布局革命：打造响应式网页设计
07-24
/* 项目可以伸缩以填满空间 */ margin: 10px; /* 项目之间的间隔 */ } ``` ```html <div class="container"> <div class="item">项目 1</div> <div class="item">项目 2</div> <div class="item">项目 3</div>...
php 多数元素（摩尔投票）
weixin_45105430的博客
09-24 178
class DuoShu{ // 摩尔投票法 public function maxNum($array1) { // 设定默认值为数组第一个元素 $start = $array1[0]; // 计数器初始化 $count = 0; for ($i =1 ; $i < count($array1);$i++) { // 如果数组里面的元素等于设定值
css占剩余高度
cwb_2120的博客
08-30 274
在很多时候，我们不知道容器的高度是多少，但是我们需要随着他的高度而变化的时候，可以设置display：flex；我这里的需求是右侧的文字是后端返回的，不知道他的具体高度，所以左侧的线要随着右侧的文字的高度变化而变化。我得布局大致是这样的 一个大容器里包含，左右两个盒子，左侧是线，右侧是文字。align-items: stretch 和 flex-grow: 1。我们这里借助display: flex中的。
css 填满剩余高度
QER 的博客
11-11 4813
如图所示，这两块均是活动的，而且下面的一大块还有滚动条，上面候选区域会随着js逻辑变高，那么我怎么让这俩加起来正好是一个页面的高度呢？ 思路是，设置整个的高度为 95vh，为什么不是100？为了下面美观一点留点空间。这样外面的大框就是铺满页面的，然后上方的候选区域没法指定高度，因为是随着用户的操作变化的，只能设置下面的高度，设置一个最小高度，一个最大高度即可。 css 如下： 整体： .half { width: 50%; margin: 10px; display: flex; flex.
CSS填充剩余高度
sun~的博客
10-17 384
CSS填充剩余高度
【css】css 实现填充剩余高度
落叶无声的专栏
10-11 1万+
自动填充高度.html <div class="box"> <div class="header">头部</div> <div class="auto-fill">自动填充</div> </div> 使用 flex（推荐） 兼容性好； 只需关注自动填充的 div，无需考虑其他 div 的高度 .box { display: flex; flex-flow: column; height: 100%; } .h
侧边栏，div占满屏幕的高度的方式
weixin_44389618的博客
12-15 1281
侧边栏，div占满屏幕高度的方式
占满DIV剩余高度的三种方法
qq_22936647的博客
09-05 2万+
着重介绍第二种 第一种，老套路，浮动大法 代码： 效果图： 绿色DIV占满了外层DIV 第二种：calc CSS计算 代码： 这里在类名为div2的DOM外又加了一层div，主要就是为了说明，如果利用calc(100% - 50px);这种模式，那么这个DIV的父元素必须指定高度，可以是具体值，也可以是百分比，特别是dom结构嵌套很深的时候，特别好...
css 填充剩余空间_你未必知道的49个CSS知识点
weixin_32818365的博客
02-02 395
本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞(窃喜)。鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。另外这里，老姚谢谢各位一如既往的支持。01.【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似02.【shap...
CSS实现div的高度填满剩余空间
wang_gongzi的博客
09-28 4796
&lt;div id="main"&gt; &lt;div id="nav"&gt;nav&lt;/div&gt; &lt;div id="content"&gt;content&lt;/div&gt; &lt;/div&gt; html, body { height: 100%; //body默认高度0
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值