Использование CSS для изменения размеров элементов?

Question

Вы можете изменить размер элемента по ширине его родителя, но можете ли вы изменить размер его по высоте родителя? (Без использования окна просмотра переменных)

CSS: "width=90% высоты родителя»??

Width:90%; 

Применение этого заключается в том, чтобы сохранить соотношение сторон в адаптивной компоновки, установив и ширину и высоту элемента относительно только для высоты родительского элемента, а не для ширины. Я пытаюсь найти решение, которое не использует переменные вида просмотра, такие как «vw» или «vh» из-за поддержки пятнистого браузера.

Open to jquery, но хотелось бы избежать, если это вообще возможно ...

Answer 1

Вы делаете свое тело или html-метки 100% высотой и шириной, и это будет работать точно так же, как vh и vw для всего документа. Родитель должен иметь некоторые предопределенные значения высоты и ширины, чтобы дети могли принимать форму, которую вы хотите иметь.

Пример.

body { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
div { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.parent { 
 

 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid black 
 
} 
 
.child1 { 
 

 
    width: 75%; 
 
    height: 75%; 
 
    border: 1px solid blue; 
 

 
} 
 

 
.child2{ 
 
    width: 50%; 
 
    height: 50%; 
 
    border: 1px solid red; 
 

 
} 
 

 
span{ 
 
    display: flex; 
 
    align-self: baseline; 
 
    position: absolute; 
 
}

<div class="parent"> 
 
     <span>parent</span> 
 
     <div class="child1"> 
 
     <span>child1</span> 
 
     <div class="child2"> 
 
      <span>child2</span> 
 
     </div> 
 
     </div> 
 
    </div>