There is a block

.block-add-feed { height: 65px; transition: all 0.5s ease-in-out; }

And changing its height when you hover

 .block-add-feed:hover { height: 100%; }

If I specify in hove, for example 175px, then the block smoothly increases the height

And if I specify, for example, 100%, the block increases the height, without animation, dramatically

How to fix it? Make a smooth increase at 100%

Sample working code:

 html, body { height: 100%; } .block-add-feed { height: 65px; background:#000; color:#fff; overflow: hidden; transition: all 0.5s ease-in-out; } .block-add-feed:hover { height: 100%; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="block-add-feed"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> </body> </html>

  • @ NikitaFast is on the site in the body, height is set to 100% - does not work, indicated in the example (in question) for body and html - height is 100%, also does not work - nicolaa
  • @ NikitaFast you can write your decision in response - nicolaa

1 answer 1

You made a mistake in css

It is necessary to write a comma and then earn

for html, body, specify a height of 100% and then your child blocks will see the height in%