html div剩下高度设置,使div填充剩余屏幕空间的高度

使用flexbox，您可以轻松地在具有固定尺寸，内容大小尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中，我已将标题设置为与其内容对齐(根据OPs问题)，我添加了一个页脚以显示如何添加固定高度区域，然后设置内容区域以填充剩余空间。

html,

body {

height: 100%;

margin: 0

}

.box {

display: flex;

flex-flow: column;

height: 100%;

}

.box .row {

border: 1px dotted grey;

}

.box .row.header {

flex: 0 1 auto;

/* The above is shorthand for:

flex-grow: 0,

flex-shrink: 1,

flex-basis: auto

}

.box .row.content {

flex: 1 1 auto;

}

.box .row.footer {

flex: 0 1 40px;

}

header

(sized to content)

content

(fills remaining space)

footer (fixed height)

html div剩下高度设置,使div填充剩余屏幕空间的高度相关推荐

html怎么div剧中,css怎么使div居中？
在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. css设置d ...
css高度设置占满页面,《CSS》关于高度铺满的问题
场景一: 我想让这个div铺满整个页面. 方法一: 先让根元素和body铺满,再然div铺满,这样div就会继承body的高度了. :root, body { height: 100%; } .wra ...
大div套多个小div，怎样设置外div的高度自适应？
在最后一个div 后面加上 overflow:hidden;如下: <div style="width:580px; height:auto; margin:0 auto; <d ...
div图片垂直居中如何使div中图片垂直居中
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的淘宝UED 招聘中有这样一道题目: "使用纯CSS ...
承接上一篇：说说评论弹出editext，计算软键盘高度，使listview，recyclerview上滑指定高度
最近项目中遇到问题:就是当软键盘弹出,editext输入时,遮挡listview,recyclerview条目,体验效果不好: 网上搜集,验证,找了个好的方法,希望能给大家项目中带来帮助: 通过监听e ...
html怎么设置一个div可以左右移动,利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
使用css属性，使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
如何使div填充剩余的水平空间？
我有2个div:在页面的左侧是一个,在右侧是一个. 左侧的一个宽度固定,我希望右侧的一个填充剩余空间. #search { width: 160px; height: 25px; float: lef ...

html div剩下高度设置,使div填充剩余屏幕空间的高度

html div剩下高度设置,使div填充剩余屏幕空间的高度相关推荐

最新文章

热门文章