0

我有这样的代码：

<body>
<div class="parent">
<div class="children">
Some content here
</div>
</div>
</body>

这个CSS：

body {width:100%;height:100%}
.parent{background-color: grey;}
.children{width: 90%; text-align: justify;}

我想让高度children等于宽度parent。不幸的是 - 我不知道为什么。我尝试在 Internet 中查找，尝试了不同的解决方案，例如children{width: 90%; text-align: justify;height: 100%;}，但它们不起作用。我知道我可以使用 table 而不是第二个 div，但是这个网站不会在较小的设备上响应，这对我来说非常重要。有什么建议么？

4

2 回答 2

0

在直接的 CSS 中，没有办法引用其他元素的属性值。为了让孩子的高度成为父母的宽度，您需要使用javascript。

页面完成渲染后，您需要使用 javascript 获取父 div 的宽度，并使用该值设置子 div 的高度。

于 2015-02-27T18:17:11.553 回答
0

您可以在 CSS 3 中使用视口单位执行此操作（每个 vw 是视口宽度的 1%）：

#parent {
    position: relative;
    background: #aaa;
    margin: 10px;
    width: 50%;
}

#child1 {
    height: 100px;
    background: #333;
    width: 100px;
    margin: 10px;
}
#child2 {

    height: 50vw;
    width: 100%;
    background: #f00;
}
}
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

问题是你必须知道你的父视图占多少百分比，尽管如果你想让你的设计响应式，这应该不是太大的问题。

于 2015-02-27T18:13:06.087 回答