0

I have the following html:

<div class="slider">
    <div>
        <img>
    </div>
    <div>
        <img>
    </div>
    <div>
        <img>
    </div>
</div>

The inner elements all contain an element and some other stuff but for sake of simplicitty I left that out. In my Javascript these elements get hidden with display: none while always only one is displayed as block. As you might guessed at this point it's suppossed to be a slider.

My problem is at the time, that in the small moment the display changes, all elements that follow will jump to the top for a split second.

My question is: How can give the whole element a height so that it doesn't collapse when in the moment it's basically empty?

All my images are 16:9, so I gave my element the width: 100% and my height: 56.25%. These would be the correct and functioning values, but it doesn't fixes my problem.

CSS:

.slider {
    width: 100%;
    height: 56.25%;
}

.slider img {
    height: 100%;
    width: 100%;
}
leon52
  • 99
  • 11
  • 1
    % height only works if the container element has a fixed height. You probably need to set `.slider` to its intended height in pixels instead of a %. – Daniel Beck Nov 09 '20 at 20:52
  • What if the page gets loaded on a different sized monitor? That would mean my page would change uncrontrollably – leon52 Nov 09 '20 at 20:54
  • 1
    Are you trying to scale the height of the element based on the size of the viewport? If so use `56.25vh` instead of %. – Daniel Beck Nov 09 '20 at 20:57
  • This works perfectly. Thanks alot. Now I can stop smashing my head into my brick wall =D I put the solution in the question – leon52 Nov 09 '20 at 21:03
  • Glad I could help! In this case it's moot because the question has been marked as a duplicate, but for future reference please _don't_ edit the question to include the answer; that will just confuse future users. (You can add an answer to your own question instead, if you like.) – Daniel Beck Nov 09 '20 at 21:09

0 Answers0