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

这可以通过 CSS 技术完成(参见其他答案) ，但也可以通过 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>

这实际上只能通过 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>

根据您的喜好调整百分比。这是一个 译自: 美国《科学》杂志网站(http://JSFiddle.net/fadi/QzVF9/)

<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;
}

为了这个工作，我认为你需要定义填充到 ex.top? 像这样:

<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;
}

视口单元的支持表

我在关于 缩放响应式动画的 CSS-Tricks 文章中写过这种方法和其他方法，您应该查看一下。