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

参见英文答案 > Maintain the aspect ratio of a div with CSS14答案假设我有一个div，它的宽度为body的50％。如何使其高度等于该值？因此，当浏览器窗口宽度为1000px时，div的高度和宽度都为500像素。

解决方法

如果你愿意忍受一些限制和跨浏览器的问题，这可以使用纯CSS。然而，它可以轻松，灵活地使用Javascript。如果你需要一个纯CSS解决方案，请参阅其他答案。

将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>

如果希望框在调整大小时使用浏览器窗口进行缩放，请将代码移动到函数并在窗口调整大小事件上调用它。这里也是一个演示(查看示例全屏和调整浏览器窗口)：

$(window).ready(updateHeight);
$(window).resize(updateHeight);

function updateHeight()
{
    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>