Question

我有.container div，宽度为600px，或100%。

在这个div里面是一个.content div，我希望它是容器宽度的100％的60％。

更常见的是，我尝试制作响应式矩形 div而不是正方形。

http://jsfiddle.net/7zE9x/（内容中的图片应该溢出，并且有一个y滚动条）

那是

我的HTML是：

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

我的css看起来像：

.container {
    background: black;
    padding: 3%;
    position: relative;
    width: 100%;
    max-width: 600px;
}

.content {
    overflow: auto;
    height: 60%; /* Set this to 400px, meaning that it won't be responsive */
}

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

如果我将.content div的高度设置为400px，它会按照我想要的方式设置它，但它不是百分比（因此调整大小时它不会改变 - 即，当宽度为容器为200px，内容div的高度应为120px）。

Answer 1

您还需要为.container设置高度。

如果孩子不知道父母的身高怎么会根据百分比调整自己???

查看 Fiddle

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

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

1 个答案: