页面元素高度固定,中间的元素需要撑满屏幕,或者内容多时显示滚动条时,我们要把父元素设置为height:100vh

<div class="parent">
<div class="header"> </div>
<div class="content"> </div>
<div class="footer"> </div>
</div>

  

.parent{
display: flex;
height: 100vh;
}
.header{
height: 100px;
}
.content{
flex: 1;
}
.footer{
height: 100px;
}

  

flex布局时,内容区域自适应高度的更多相关文章

  1. 解决CSS3多列样式column-width布局时内容被截断、错乱

    一.问题 使用CSS3的column-width: auto | <length>属性时,出现排列的内容被截断,出现错位的现象. 二.原因 需要为图片容器设置高度,不然会崩掉. 三.解决方 ...

  2. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  3. flex布局时,vertical-align:middle无效

    flex布局,子元素内部vertical-align=middle无效,对文字的容器 display: flex; align-items: center;

  4. flex布局 一侧固定宽度 一侧自适应

    想实现一个类似知乎个人主页的资料显示布局 类是下面这样 其中显示图片在一个div,Name和class和button在一个div中,使用justify-content: space-between; ...

  5. DIV+CSS布局时, DIV的高度和宽度特性

    这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%).高度最小化,高度随着内容自动伸展: 一般情况做网页的话,大部分都是固定了总 ...

  6. css布局一屏幕的自适应高度

    css ;;list-style: none;} .top{height: 100px;background-color:orange;} .max{;background-color:skyblue ...

  7. flex布局无法自动适应的bug以及实现textarea根据内容自适应

    -webkit-box布局无法自动适应高度的bug css3的新属性display:-webkit-box带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...

  8. flex布局下, 内容改变 不重新渲染问题

    当使用flex布局时,flex内元素包含的内容改变时,浏览器不会进行重新渲染, 答案引用 http://stackoverflow.com/questions/23474191/flexbox-hei ...

  9. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

随机推荐

  1. 集合之HashTable

    在java中与有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,value)方法保存起来,然后通过get(key)方法获取相 ...

  2. grep, sed 与 awk 补补课,到底怎么用!

    grep, sed 与 awk 相当有用 ! gerp 查找, sed 编辑, awk 根据内容分析并处理. awk(关键字:分析&处理) 一行一行的分析处理 awk '条件类型1{动作1}条 ...

  3. 关于C#的静态类和静态构造函数

    静态构造函数是C#的一个新特性,其实好像很少用到.不过当我们想初始化一些静态变量的时候就需要用到它了.这个构造函数是属于类的,而不是属于哪里实例的,就是说这个构造函数只会被执行一次.也就是在创建第一个 ...

  4. Linux磁盘分区和挂载

    Linux磁盘分区和挂载 分区 分区的方式: mbr分区 最多支持4个主分区 系统只能安装到主分区上 扩展分区要占用一个主分区 MBR最大支持2TB,但拥有最好的兼容性 gtp分区 支持无线多个主分区 ...

  5. JS-移动端判断上拉和下滑

    一.手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑. 二.js中距离:pageY.clientY.offsetY的区别: offsetY:相对于父节点的偏移距 ...

  6. java学习笔记-JavaWeb篇一

    JavaWEB篇一 1 Tomcat的安装和配置 2 JavaWeb开发的目录结构 3 使用Eclipse开发JavaWeb项目 4 第一个Servlet程序 5 Servlet 的配置及生命周期方法 ...

  7. 1553: Good subsequence (很奇妙的set模拟题,也可以直接暴力)

    1553: Good subsequence Submit Page    Summary    Time Limit: 2 Sec     Memory Limit: 256 Mb     Subm ...

  8. 【ev】视频软件

    EV系列:EV录屏.EV剪辑

  9. boost::bind 学习

    最近学习了太多与MacOS与Iphone相关的东西,因为不会有太多人有兴趣,学习的平台又是MacOS,不太喜欢MacOS下的输入法,所以写下来的东西少了很多.    等我学习的东西慢慢的与平台无关的时 ...

  10. The Gene of Bitizens

    1.          Summary The document is about the general idea of the architecture design of the Bitizen ...