html5 div 高度自适应,怎么让div里面的子元素的高度自适应呢

用flex布局可以解决这个问题

跟你一样的div结构，为了便于看清和区分，里面写了字母。样式里每个div都加了背景色。完整代码如下:

Title

body {

margin: 0;

}

.contain {

background: gray;

height: 400px;

display: flex;

flex-direction: column;

}

.A {

background: red;

}

.B {

background: yellow;

flex-grow: 1;

}

.C {

background: blue;

}

运行效果如下：

下面白色的部分是网页的空白部分。可以看出，已经实现了你要的效果。A B C我都没有给高度，B的高度是自动填满contain的，所以压根看不到contain的灰色

。

你可以复制代码自己运行一下，在浏览器里随意的改contain、A、C的高度，不管怎么改，B都会自动填充。

如果解决了你的问题，给我个采纳吧！

html5 div 高度自适应,怎么让div里面的子元素的高度自适应呢相关推荐

html flex 的高度,html – 使flexbox行成为最短子元素的高度？
The goal is to have a row that is the same height as the shortest child element. 这不是flexBox可以自动执行的操作 ...
父元素自适应子元素的高度
在设计中宽度我们通常可以进行控制,但高度却没有明确的控制,一般元素的高度都是由子元素来控制的.即子元素的高度和决定了父元素的高度.当然手动设置父元素的指定高度也是可以的. 问题:百分比控制的父元素有时 ...
[Web前端] 子元素设置高度为100%, 却没有与父元素对齐高度.
大概描述一下我遇到的情况. 父元素没有明确指定高度, 但是其中一个子元素的高度是确定的, 并且通过这个高度将父元素的高度撑起来. 另一个子元素的高度是100%, 即, 我想要使它与父元素的高度统一. ...
令子元素垂直居中（并且子元素的高度不固定）
父元素规定行高line-height和高度height:子元素使用display:inline-block.vertical-align: middle; html文件: <div class= ...
html5shiv主要解决IE6-8 无法识别HTML5的新标签，父节点不能包裹子元素，以及应用CSS样式...
html5shive html5shiv主要IE6-8解决: 1,HTML5提出的新的元素不被IE6-8识别. 2,这些新元素不能作为父节点包裹子元素, 3,并且不能应用CSS样式.让CSS 样式应用 ...
父元素flex:1,子元素设置高度百分百无效
有的时候我们写页面布局会出现,父级的高度是通过flex为1来设置的,然后子级想保持和父级一样的高度,很多人都会想到设置高度百分百.不过由于这里的父元素是缺省的,所以你设置了高度百分百是无效的.我之前是 ...
css高度自适应-父元素随子元素变化
Day16 1. min-height IE6不兼容问题正常项目中:最小高度直接用min-height即可. 如果考虑兼容:min-height IE6不兼容.IE6默认把height解析成最小高度 ...
父元素没有高度，子元素高度失效
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
关于父元素设置maxHeight或minHeight，子元素高度设置%的不生效的问题
关于父元素设置maxHeight或minHeight,子元素高度设置%的不生效的问题要理解这个问题,首先要搞清楚一个元素的高度是由什么决定的?如果在不额外设置高度或者行高等外加的影响高度的css样式 ...

html5 div 高度自适应,怎么让div里面的子元素的高度自适应呢

html5 div 高度自适应,怎么让div里面的子元素的高度自适应呢相关推荐

最新文章

热门文章