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

xiangchaobin 发布于2019-08-02 14:11 / 3805人阅读

摘要：自动填满剩余高度正常情况自上而下放要放的东西就行了，但是现在有一个需求是这样的，头部国定，下面的东西会很多要有滚动条我之前都是头部固定，给一个就行了但是现在又有一个恶心的需求，整个背景一样，而会有一些文字，而且没有背景，这样滚动的话会从文

div自动填满剩余高度

html

正常情况自上而下放要放的东西就行了，
但是现在有一个需求是这样的，头部国定，下面的东西会很多要有滚动条
我之前都是头部固定，给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学习链接

云服务器 GPU云服务器 html代码分两部分两部分部分数据文字部分

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53629.html

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

摘要：自动填满剩余高度正常情况自上而下放要放的东西就行了，但是现在有一个需求是这样的，头部国定，下面的东西会很多要有滚动条我之前都是头部固定，给一个就行了但是现在又有一个恶心的需求，整个背景一样，而会有一些文字，而且没有背景，这样滚动的话会从文 div自动填满剩余高度 html 正常情况自上而下放要放的东西就行了，但是现在有一个需求是这样的，头部国定，下面的东西会很多...

刘玉平 2019-08-30 15:55 评论0 收藏0
想要清晰的明白（二）CSS 盒模型Block box与Line box

摘要：垂直格式化，有一个很重要的方面是会造成垂直相邻外边距合并，解决这个的方式见想要清晰的明白一中的部分。参考资料权威指南第三版为负值产生的影响和常见布局应用布局圣杯布局双飞翼布局深入理解和的基友关系深入理解中的行高在上一篇想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用，接下来就详细的介绍两种盒子的具体细节 Block Box show...

Vicky 2019-08-30 13:03 评论0 收藏0
margin详解

摘要：属性指定了盒的区的宽度。简写属性一次性设置四周的，而其它属性只设置它们各侧的。 margin属性指定了盒的margin区的宽度。margin简写属性一次性设置四周的margin，而其它margin属性只设置它们各侧的。这些属性适用于所有元素，但非替换行内元素上的竖直margin将不会产生任何效果 margin与容器尺寸 margin与可视尺寸 margin与可视尺寸只适用于没有设定...

stonezhu 2019-08-29 12:25 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮动

摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...

yankeys 2019-08-29 15:10 评论0 收藏0
网站footer沉底效果的三种解决方案

摘要：沉底效果重点代码总结以上三种方法都属于没什么副作用的，其实实现这种沉底效果还有别的实现方式，但是对其他布局有影响，这里不赘述，之后有了更好的解决方案，再来更新。问题背景很多网站设计一般是两个部分，content + footer，content里面装的是网站主体内容，footer里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现下面两种情况：1.内容较少时，这个foot...

chanjarster 2019-08-26 13:57 评论0 收藏0