CODEWITHSUNDEEP
csscss-transforms
JarsOfJam-Scheduler
JarsOfJam-Scheduler

Reputation: 3169

How to use transform: translateY on a child while automatically resizing the parent?

Let be a division containing a second division. The first one does not have a remarkable CSS rule; the second one is defined by its width and height. Both are coloured.

A Y-translation of several pixels is applied to the child division as follows:

https://codepen.io/anon/pen/KbjLMw

Sources

HTML

<div id="parent">  
  <div id="child"></div>
</div>

CSS

#parent {
  background: red;
}

#child {
  background: yellow;
  width: 100px;
  height: 100px;
  transform: translateY(253px);
}

Question

We would like the parent division to see its height increased according to the movement of its child division. How could such a result be achieved? The use of transform: translateY(xyz) is desirable but not necessary.

Upvotes: 0

Views: 1597

Answers (2)

04FS
04FS

Reputation: 5820

We would like the parent division to see its height increased according to the movement of its child division. How could such a result be achieved?

That is not possible using transform, because that keeps the space the element would have taken originally reserved, but it does’t make it take space at the new position.

You can get the parent to grow, if you move the child via margin-top: 253px; instead. (Of course that leads to a collapsing margins situation here, but that can be fought f.e. by making the parent inline-block or setting overflow:hidden.)

Upvotes: 2

Xenio Gracias
Xenio Gracias

Reputation: 2758

add margin-top: 90px; to child and add padding-top: 1px. hope this is what you are looking for. thanks

link for your ref.

https://codepen.io/Xenio/pen/XOXJGz

Upvotes: 1

Related Questions