I want to fix the size of the body with CSS to the initial size when the page first loads-CodePudding

I want to fix the size of the body to the initial size (size when the page first loaded to prevent any changes to the it from elements that resize on animations).

How do i do this?

body {
  height: initial; /* This does not work */
}

and neither does this

body {
   height: 100vh;
}

EDIT - This is the animation


.small-logo img {  /* This class is toggled in JS*/
    height: 40px;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: shrink 1s ease;
    animation-iteration-count: 1;
}

@keyframes shrink {
    0% {
        height: 100px;
        top: -100px;
        opacity: 10%;
    }
    100% {
        height: 40px;
        top: 0px;
        opacity: 100%;
    }
}

CodePudding user response：

This is pure javascript solution if you want to fix size on initial load:

document.addEventListener('DOMContentLoaded', function () {
  // find out your body's height and hardcode it programmaticaly:
  var height = document.getElementsByTagName('body')[0].clientHeight;
  document.getElementsByTagName('body')[0].style.height = height  "px"; 
}, false);

So, you do it after intial DOMContentLoaded event is executed and then fix body height.

CodePudding user response：

You should take a look at: fit-content, max-content, min-content.

fit-content sets the height of the element to its needed space. In order to "protect" the height you can use max-height: fit-content and/or min-height: fit-content.