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

Question

假设我的div的宽度为正文的50％。如何使其高度等于该值？因此，当浏览器窗口的宽度为1000px时，div的高度和宽度均为500px。

Answer 1

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

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

$(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>