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

最接近的解决方案是使子宽度位置：绝对，将左右属性设置为0，并设置宽度。虽然不是CSS中最干净的事情！

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

这是一个仅限JavaScript的解决方案（注意如何在CSS中将子宽度设置为10px，但重置为1000px以通过JavaScript匹配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 个答案: