DEV Community

loading...

Discussion on: At least as tall as viewport, but taller if needed (the proper solution)

Collapse
mvoloskov profile image
Miloslav Voloskov Author • Edited

Nested divs resembles arbitrary amount of children. Star selector is the peak declarativeness.

The only possible way to ensure that the content block is at least as tall as our viewport no matter the amount of parents is — you guessed it — make styling go down the chain and style all its parents. The other approach is just make the content block at least as tall as 100vh or -webkit-fill-available, but that works bad on mobile devices.

As soon as viewport-related units work this bad, I see my approach as the only viable option aside maybe from doing the same with tables + table cells or grids. I like flexbox more. If you have a more elegant solution, I'm more than happy to see it!

There always can be multiple fill-end elements if you don't need to style something:

<div class="fill-start">
  <div class="fill-end">
    <!-- sidebar -->
  </div>
  <div class="necessary-element">
    <div class="fill-end">
      <!-- content -->
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
Collapse
jamesthomson profile image
James Thomson • Edited

Star selector is the peak declarativeness.

Sorry, I meant explicit.

Nested divs resembles arbitrary amount of children.

Gotcha. Will have to play around with your approach with more use cases, but it's an interesting solution to the whole 100vh mess that we find ourselves in due to mobile browsers. Thanks for the article.