使DIV具有100%的父DIV而不知道父DIV的高度并保持其响应[重复]
我有这样的代码：
<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{width:90%；text-align:justify；height:100%；}
，但它们不起作用。我知道我可以用table代替第二个div，但是这个网站在较小的设备上不会有响应，这对我来说非常重要。有什么建议吗？
共有2个答案
您可以在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>
在直CSS中，没有办法引用另一个元素属性值。为了让子节点的高度与父节点的宽度相等，你需要使用javascript。
页面渲染完成后，需要使用javascript获取父div的宽度，并使用该值设置子div的高度。
-
问题内容： 这是HTML： 这是CSS： 使用Chrome开发人员工具检查后，内部div的高度为0px。 我如何强制其为父div高度的100％？ 问题答案： 为了使高度基于其内容并基于其高度，使两个元素都绝对定位。 可以在css height属性的规范中找到更多详细信息，但本质上，如果的height为，则必须忽略height ， 除非_绝对定位。然后，高度将为0， _除非 将其自身绝对定位。 但是
-
问题内容： 如您在下面的CSS中所看到的，我想将自己定位在之前。这是因为我当前正在开发的网站也可以在移动设备上工作，该网站应该位于底部，因为它包含了我想要在移动设备内容下方显示的导航。-为什么没有2个母版页？这是在整个HTML中重新定位的仅有2个，因此，此较小更改的2个母版页是一个过大的功能。 HTML： CSS： 具有动态高度，因为不同的子站点可能具有更多或更少的导航项。 我知道绝对定位元素已从
-
正如您可以在下面的CSS中看到的，我希望将自己定位在之前。这是因为我目前正在开发的网站也应该在移动设备上工作，其中应该在底部，因为它包含我想要在移动设备上的内容下面的导航。-为什么不是2个主页？这是整个超文本标记语言中唯一被重新定位的两个，所以这一微小变化的两个主页是一个过度。 超文本标记语言： CSS: 具有动态高度，因为不同的子网站可能有更多或更少的导航项。 我知道绝对定位元素从流中移除，因此
-
问题内容： 我有一个具有以下结构的网站： 导航在左侧，内容div在右侧。内容div的信息是通过PHP获取的，因此每次都不同。 无论加载哪个页面，如何垂直缩放导航使其高度与内容div的高度相同？ 问题答案： 注意 ：此答案适用于不支持Flexbox标准的旧版浏览器。 我建议您看看使用Cross-Browser CSS和NoHacks的等高列。 基本上，以与浏览器兼容的方式使用CSS做到这一点并不是一
-
我在flexbox数组中有一系列元素。每个元素都包含一张“卡片”，其高度各不相同。当我试图让卡片占据它们所在的flexbox子元素的剩余空间时，它们会溢出到下面一行的元素中。如果我指定所有flex子项都是100%高度，那么它们的高度实际上会折叠为它们内部卡的大小。 蓝色卡片的高度为100%。从字面上看，它们的高度是父母的100%，但这意味着它们会溢出。 我怎样才能让他们只扩展到他们父母的底部呢？
-
问题内容： 我有一个如下所示的div页面 样式 我想调整div的高度以填充（或拉伸到）整个div （标有绿色边框），并且不想越过页脚divD。我该如何解决？ 问题答案： 只需添加到造型。应该没有必要。