假设我有一个宽度为 body 的 50% 的 div。如何使其高度等于该值?这样当浏览器窗口宽度为1000px时,div的高度和宽度均为500px。
这实际上可以仅使用 CSS 来完成,但 div 内的内容必须绝对定位。关键是使用百分比形式的填充和box-sizing: border-box
CSS属性:
div {
border: 1px solid red;
width: 40%;
padding: 40%;
box-sizing: border-box;
position: relative;
}
p {
position: absolute;
top: 0;
left: 0;
}
<div>
<p>Some unnecessary content.</p>
</div>
根据您的喜好调整百分比。这里有一个JSFiddle http://jsfiddle.net/fadi/QzVF9/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)