我可以根据基于百分比的宽度来设置div的高度吗？
假设我有一个宽度为50％的div。 我如何使其高度等于该值？ 所以当浏览器窗口宽度为1000px时，div的高度和宽度都是500px。
如果你愿意忍受一些限制和跨浏览器的问题，可以用纯CSS完成。 但是，使用Javascript可以轻松灵活地完成。 如果您需要纯粹的CSS解决scheme，请参阅其他答案。
设置div的宽度为（例如）50％，使用JavaScript检查其宽度，然后相应地设置高度。 下面是一个代码示例（我正在使用jQuery，一个JavaScript库）：
$(function() { var div = $('#dynamicheight'); var width = div.width(); div.css('height', width); }); #dynamicheight { width: 50%; /* Just for looks: */ background-color: cornflowerblue; margin: 25px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="dynamicheight"></div>
这实际上可以只用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>
<div><p>some unnecessary content</p></div> 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> div{ border: 1px solid red; width: 40%; padding-top: 40%; box-sizing: border-box; position: relative; } p{ position: absolute; top: 0; left: 0; }
无论如何，这就是我得到它的工作，因为只是填充所有周围它不会是一个正方形。
我做了一个CSS的方法，这是由视口宽度的大小，但最大的视口高度的100％。 它不需要box-sizing:border-box 。 如果伪元素不能使用，伪代码的CSS可以应用到一个孩子。 演示
.container { position: relative; max-width:100vh; max-height:100%; margin:0 auto; overflow: hidden; } .container:before { content: ""; display: block; margin-top: 100%; } .child { position: absolute; top: 0; left: 0; }
视口单元支持表
我在关于缩放响应animation的CSS-Tricks文章中写到了这种方法和其他方法，您应该查看这些animation 。
