Как получить ширину родительского родителя в HTML с помощью CSS?

Question

Мой HTML-код:

<div id="wrapper" style="width:100%;"> 
    <div style="width:960px;"> 
     <div style="width:30%;"> 
      <div>Hello World!</div> 
     </div> 
    </div> 
</div> 

Как я могу установить ширину "Hello World!" div же как «обертка» div с css?

Answer 1

Чтобы дать что-то ширину относительно одного из его предков, одним из решений является предоставление предка position:relative и самого элемента position:absolute.

/* make the three divs visible, to demonstrate the effect */ 
 

 
div {background-color: rgba(128,128,128,.3)} 
 

 
/* the main point to the solution */ 
 

 
#wrapper {position:relative} 
 
#wrapper > div > div {position:absolute} 
 

 
/* some cleaning up of the side effects */ 
 

 
#wrapper > div::after {content:'\200B'}

<div id="wrapper" style="width:100%;"> 
 
    <div style="width:960px;"> 
 
     <div style="width:30%;"> 
 
      <div>Hello World!</div> 
 
     </div> 
 
    </div> 
 
</div>

Как вы можете видеть, когда вы вызываете сниппаете на полной странице, внутренний DIV (с темным цветом фона) составляет 30% от ширины внешних один, даже если представляет собой фиксированную ширину div между ними.

Если вы не имели в виду что-то еще, в этом случае я извиняюсь, но тогда вы должны объяснить себя лучше.