Html 将div的高度设置为其容器的百分比

我有一个

.container

div，它的最大宽度是

600px

100%

在这个div中有一个

.content

div，我希望它是容器100%宽度的60%

更一般地说，我尝试创建一个响应性的矩形div，而不是正方形

（内容中的图像应溢出，并具有y形滚动条）

就是

我的HTML是：

<div class="container">
    <div class="content">
        <img src="..." />
    </div>
</div>

---

如果我将

.content

div的高度设置为

400px

，它可以满足我的要求，但不是一个百分比（因此，调整大小时它不会改变-即当容器的宽度为

200px

时，content div的高度应该是

120px

）.

您还需要为

.container

设置高度

如果孩子不知道父母的身高，他将如何根据百分比自我调整

看看

body {
    padding: 80px;
}

.container {
    background: black;
    padding: 3%;
    position: relative;
    width: 100%;
    max-width: 600px;
    height:500px;/* Set height as per your wish. */
}

.content {
    overflow: auto;
    height:50%; /* Adjust height accordingly. */
}

.content img {
    display:block;
    width: 100%;
}

---

如果设置百分比，它将从其父级获取高度/宽度。因此，您需要在某个地方定义高度/宽度。可能在您的

.container

上，甚至在

主体上？您似乎是，但我是否必须通过设置
px
约束来具体执行此操作？或者我可以在整个过程中使用百分比吗？您可以将主体设置为
100%
。但要将
.content
设置为
60%
每个家长都需要定义
高度。
body {
    padding: 80px;
}

.container {
    background: black;
    padding: 3%;
    position: relative;
    width: 100%;
    max-width: 600px;
    height:500px;/* Set height as per your wish. */
}

.content {
    overflow: auto;
    height:50%; /* Adjust height accordingly. */
}

.content img {
    display:block;
    width: 100%;
}