我可以基于百分比的宽度设置div的高度吗？

这可以通过CSS hack完成（请参见其他答案），但是也可以使用Javascript轻松完成。

将div的宽度设置为（例如）50％，使用Javascript检查其宽度，然后相应地设置高度。这是使用jQuery的代码示例：

$(function() {    var div = $('#dynamicheight');    var width = div.width();    div.css('height', width);});#dynamicheight{    width: 50%;        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>

如果希望框随着浏览器窗口的缩放而缩放，则将代码移至函数并在窗口调整大小事件中调用它。这也是一个演示（查看示例全屏并调整浏览器窗口大小）：

$(window).ready(updateHeight);$(window).resize(updateHeight);function updateHeight(){    var div = $('#dynamicheight');    var width = div.width();    div.css('height', width);}#dynamicheight{    width: 50%;        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>