После Transform scale высота родителя остаётся

125
01 ноября 2021, 11:40

Есть ребёнок и родитель, у ребёнка размеры 1610x900, у родителя высота примерно 300px. Добавил ребёнка в родителя, transform:scale(0.345), и высота родителя осталось 1147.97px. Те, как до трансформации. Из-за этого отодвигает ниже лежащий блок. max-height не вариант, нужно что-бы блоки прилегали вплотную, а если высота у телефона, например, меньше чем max-height нижний блок уходит в никуда. 

Пример:


.child 
{ 
 width:600px; 
 height:600px; 
 background-color:blue; 
} 
.parent 
{ 
 width:100%; 
 background-color:green; 
} 
.row 
{ 
 width:100%; 
 height:200px; 
 background-color:purple; 
}
<div class="parent"> 
  <div class="child" style="transform:scale(0.345);"></div> 
</div> 
<div class="row"></div>

Видно, как зелёный блок продолжает идти вниз, хотя синий блок стал меньше после scale().

Есть предположения как фиксить?

Answer 1

.child { 
  width: 600px; 
  height: 600px; 
  background-color: blue; 
  transform: scale(0.345); 
  transform-origin: top center; 
  margin-bottom: -393px; 
} 
 
.parent { 
  background-color: green; 
  overflow: hidden; 
} 
 
.row { 
  height: 200px; 
  background-color: purple; 
}
<div class="parent"> 
  <div class="child"></div> 
</div> 
<div class="row"></div>

READ ALSO
Как в шаблон вставить php-файл?
HTML

Как в шаблон вставить php-файл?

Используется простой шаблонизатор по типу:

 143
Вирутальные функции
c++

Вирутальные функции

Есть std::vector aТам содержатся как объекты типа A так и C

 91
C++ cli альтернатива clock() (&quot;time.h)
c++

C++ cli альтернатива clock() ("time.h)

Пытаюсь переписать код на C++ в VS2019 , но столкнулся с проблемой - библиотека "timeh" и "ctime" не поддерживается, а альтернативу clock() я сам найти не смог

 159
C++ Проблема с if во внутреннем цикле
c++

C++ Проблема с if во внутреннем цикле

Через считалку в строке выбираются люди в одномерном массиве и заносятся в очередьДо этого всё работало через остаток от целочисленного...

 80