Question

我有这样的代码：

<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的宽度。不幸的是 - 我不知道为什么。我试图在互联网上寻找不同的解决方案，例如children{width: 90%; text-align: justify;height: 100%;}，但它们不起作用。我知道我可以使用表而不是第二个div，但是这个网站不会对较小的设备做出响应，这对我来说非常重要。有什么建议？

Answer 1

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

＆＃13;

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

＆＃13;

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

＆＃13;

问题是你必须知道你父母的视口的百分比，尽管如果你试图让你的设计做出响应，这不应该是一个太大的问题。

Answer 2

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

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

让DIV拥有父DIV的100％而不知道父亲的身高并保持其反应

2 个答案: