html怎么自动高度,css中高度怎么自适应呢？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

css中高度怎么自适应呢？

方案一：CSS3 vw 单位

CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width;

vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；

vmin 是相对当前视口宽高中 较小 的一个的百分比单位;

vmax 是相对当前视口宽高中 较大 的一个的百分比单位

利用 vw 单位，我们可以很方便做出自适应的正方形：

优点：简洁方便

缺点：浏览器兼容不好

方案二：设置垂直方向的padding撑开容器

在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。

由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：.placeholder{

width:100%;

padding-bottom:100%;

}

此时高度可能溢出，我们可以设置容器的高度为 0：.placeholder{

height:0;

}

方案三：利用伪元素的 margin(padding)-top 撑开容器

在方案二中，我们利用百分比数值的 padding-bottom 属性撑开容器内部空间，但是这样做会导致在元素上设置的 max-height 属性失效：

而失效的原因是max-height 属性只限制于 height，也就是只会对元素的 content height 起作用。那么我们是不是能用一个子元素撑开 content 部分的高度，从而使 max-height 属性生效呢？我们来试试：.placeholder{

width:100%;

}

.placeholder:after{

content:'';

display:block;

margin-top:100%;/*margin百分比相对父元素宽度计算*/

}

此时需要在在父元素上触发 BFC：.placeholder{

overflow:hidden;

}

注：若使用垂直方向上的 padding 撑开父元素，则不需要触发 BFC