一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度

div自动填满剩余高度

html

<div class="wrapper" style="height:800px;"><div class="header" id="header"></div><div class="body" id="body"></div>
</div>

正常情况自上而下放要放的东西就行了，
但是现在有一个需求是这样的，头部国定，下面的东西会很多要有滚动条
我之前都是头部固定，给wrapper一个overflow-y:hidden就行了
但是现在又有一个恶心的需求，整个wrapper背景一样，而header会有一些文字，而且没有背景，这样滚动的话会从文字缝隙之间看到滚动的内容，不雅
总之就要header是一个高度不确定的div，而body自动铺满剩下的高度

现在有两种方法，对于获取动态高度我倾向于用js
方法一：

var header = document.getElementById('header');
var body = document.getElementById('body');
body.style.height = 800-header.clientHeight+'px';

第二种方法就是只用css来搞定，对于灵活的布局首先就会想到flex

方法二：

.wrapper{display:flex;flex-direction: column;  //竖轴方向
}
.body{flex:auto;      //自动铺满剩余空间
}

flex学习链接

一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度相关推荐

如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar&quo ...
DIV自动填满剩余空间
参考:http://bbs.blueidea.com/thread-2773197-1-1.html 效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DT ...
CSS实现div填满剩余高度
需求: nav和content盒子的高度和浏览器高度相同,且不能出现纵向滚动条绿色盒子高度固定,比如:50px 紫色盒子填充剩余的高度 BODY部分的代码: 方式一:绝对定位方式二:box-siz ...
css div填满剩余高度
<div class="father"><div class="child1"></div><div class=&q ...
背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局
文章目录背景平铺两栏自适应(占满剩余高度) 需求实现 fastclick插件的使用 IScroll插件的使用(实现区域滚动效果) 条件双飞翼布局(两边固定宽度,中间自适应) 条件实现背景平 ...
指针，指针：分装一个函数，实现两个数的交换。指向固定的区域
1.指针的引入 //第9行,取值运算符*,他把后面跟的内存地址中的数据"取出来": 2.指针变量的引入什么是指针变量:存放地址的变量什么是指针变量:存放指针的变量指针 = 地 ...
如何让图片跟随div大小自动填满
1.图片与div的width和height一致(一般不同),手动调整div或图片的width和height 2.div的属性设置: background:url("背景图片路径") ...
[html] 用一个div模拟textarea的实现
[html] 用一个div模拟textarea的实现上面的代码实现了div变为可编辑状态,但是textarea标签可以在右下角自由拉伸<div class="edit" c ...
上下定高中间自适应_css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的同学可以百度.goo ...

一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度

一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度相关推荐

最新文章

热门文章