DIV祖父母的宽度为100％，而祖父母的宽度不是视口的100％

Question

我在这里找到了一些解决方案，但是所有这些解决方案都假定祖父母的电压为100vw，在我看来，这不是。

这是我想要实现的目标：

<body>
    <div id="grandparent" style="width: 1000px">
        <div id="parent" style="width: 500px">
            <div id="child" style="width: grandparent"></div>
        </div>
    </div>
</body>

实际上，我需要将孩子的宽度与5级祖父母的宽度对齐。 如果使用纯CSS绝对不可能，那么我将感谢JS解决方案。

但是CSS是更可取的。

Answer 1

最接近的解决方案是使子级宽度位置：绝对，将left和right属性设置为0，然后设置宽度。 不过，这不是CSS中最干净的事情！

Answer 2

设置position: relative祖父母的position: relative和position: absolute子元素的position: absolute应该可以解决问题。 但是请记住，祖父母与孩子之间不应有其他相对定位的元素。 考虑下面的代码：

 #grandparent1 {width: 1000px; position: relative; background: yellow;} #grandparent2 {width: 200px; background: pink;} #grandparent3 {width: 300px; background: grey;} #grandparent4 {width: 400px; background: orange;} #grandparent5 {width: 100px; background: aqua;} #parent {width: 500px; background: pink;} #child {width: 100%; background: red; position: absolute;}

 <div id="grandparent1"> Grand Parent #1 <div id="grandparent2"> Grand Parent #2 <div id="grandparent3"> Grand Parent #3 <div id="grandparent4"> Grand Parent #4 <div id="grandparent5"> Grand Parent #5 <div id="parent"> Parent <div id="child"> Child </div> </div> </div> </div> </div> </div> </div>

Answer 3

这是仅JavaScript的解决方案（请注意，孩子的宽度在CSS中如何设置为10px，但通过JavaScript重置为1000px以匹配grandparent1的宽度）：

 document.getElementById('child').style.width = window.getComputedStyle(document.getElementById("grandparent1")).width;

 #grandparent1 {width: 1000px; position: relative; background: yellow;} #grandparent2 {width: 200px; background: pink;} #grandparent3 {width: 300px; background: grey;} #grandparent4 {width: 400px; background: orange;} #grandparent5 {width: 100px; background: aqua;} #parent {width: 500px; background: pink;} #child {width: 10px; background: red; position: absolute;}

 <div id="grandparent1"> Grand Parent #1 <div id="grandparent2"> Grand Parent #2 <div id="grandparent3"> Grand Parent #3 <div id="grandparent4"> Grand Parent #4 <div id="grandparent5"> Grand Parent #5 <div id="parent"> Parent <div id="child"> Child </div> </div> </div> </div> </div> </div> </div>

DIV祖父母的宽度为100％，而祖父母的宽度不是视口的100％

问题描述

3 个解决方案

解决方案1
0 2016-05-22 23:47:17

解决方案2
0 2016-05-23 00:06:35

解决方案3
0 2016-05-23 00:42:55

DIV祖父母的宽度为100％，而祖父母的宽度不是视口的100％

问题描述

3 个解决方案

解决方案1 0 2016-05-22 23:47:17

解决方案2 0 2016-05-23 00:06:35

解决方案3 0 2016-05-23 00:42:55

解决方案1
0 2016-05-22 23:47:17

解决方案2
0 2016-05-23 00:06:35

解决方案3
0 2016-05-23 00:42:55