使用百分比高度时的问题
在响应式布局中，往往会设置元素的百分比宽度，以适应视口大小的变化。在很多时候我们希望元素的宽高比不变，如果还是简单的将height写成百分比形式，往往渲染出来的结果是无论我们怎么改变窗口大小，height始终是min-height的值（看不见元素也是这个原因）。
原因
我们知道百分比高度和宽度的计算都是基于父元素高度的。我们溯源到最顶的父元素——html，它的宽度是基于视口宽度的，但是它的高度却是基于内容的，这也就是为什么想通过百分比高度来使高度也响应式改变往往不可行的原因。
方法一：使用padding
主要原理是padding的计算是基于父元素宽度的，我们以保持空div的height=width为例，可以像这样写：
div {
width: 60%;
height: 0%;
padding-top: 60%;
}
当然如果用这种方式，你还得必须考虑内容所占的高度，所以一般不推荐这样写。
方法二：使用js
只要原理是在onresize事件中，通过clientWidth属性获取元素的可视宽度，并将其赋值给元素的height。有以下几种写法：
在body中：
<body class=" container" οnresize="new function() {
var el=document.getElementById('div');
el.style.height=el.clientWidth+'px';
}">
注意： 1. clientWidth是没有单位的，需要加上px；2. 虽然大多数标签都有onresize事件，但是只有写在body的onresize中才有效。
使用window.onresize
window.onresize = function () {
var el = document.getElementById('div');
el.style.height = el.clientWidth + 'px';
}
或者是jq的$(window).resize等等。
使用js最为灵活，推荐。
方法三：使用vh和vw
1vh就是视口高度的1%，1vw就是视口宽度的1%，使用这两个单位可以让元素宽高跟随视口大小变化，vh和vw是css3最有用的特性之一。最推荐使用这个方法。
方法四：使用定位
使用Fixed定位或Absolute定位，使元素脱离文档流，这种方法要求元素必须被定位，限制太多，不推荐。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/15294.html
