DIV 100% ширина бабушки и дедушки в то время как ширина бабушки и дедушки не 100% viewport

Я нашел здесь некоторые решения, но все они предполагают, что у дедушки есть 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 предпочтительнее.

3 ответа

  1. Наиболее близким решением было бы сделать позицию дочерней ширины: абсолютной, установить свойства left и right в 0 и установить ширину. Не самая чистая вещь, чтобы сделать в CSS, хотя!

  2. Установка position: relativeна дедушку и 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>

  3. Вот решение только JavaScript (обратите внимание, как ширина ребенка устанавливается в 10px в CSS, но сбрасывается в 1000px, чтобы соответствовать ширине grandparent1 через JavaScript):

    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>