![CSS 点击按钮以后修改DIV的高度，代码怎么写？[有代码]](/aiimages/CSS+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE%E4%BB%A5%E5%90%8E%E4%BF%AE%E6%94%B9DIV%E7%9A%84%E9%AB%98%E5%BA%A6%EF%BC%8C%E4%BB%A3%E7%A0%81%E6%80%8E%E4%B9%88%E5%86%99%EF%BC%9F%5B%E6%9C%89%E4%BB%A3%E7%A0%81%5D.png)
position: relative
width: 100%
height: 0
padding-bottom: 30%
}
.c-wp{
position: absolute
left: 0
top: 0
width: 100%
height: 100%
background-color: red}
<div class="a-wp">
<div class="c-wp"></div>
</div>
此时调整.a-wp的padding-bottom就是调整宽高比例。例子中的位10:3
比如宽度为父元素的50%加上5像素：width:calc(50% + 5px)
要注意加号（或减号）两边一定要加上空格！
再比如宽度是父元素的三分之一再减去3像素：
width:calc((100% / 3) - 3px)
乘号（或除号）两边可以不加空格，但建议最好加上！
此外必须注意这种方法属于css3标准，不是什么浏览器都适用的哦！
