Full height section with query loop

How To
1

I have 2 sections, one of top of the other. Both contain query loops (so their height is variable). How to extend the bottom section’s height to reach the bottom of the viewport?

2

Hi @Adrenaline22,

I’m not exactly sure what you want (can you send a link, where I can see those sections, and maybe a screenshot of how you want them to look?), but if you want the section to be as tall as the viewport, then you can set height: 100dvh and it should work.

Let me know if it works or if it’s something else.

Best regards,
Matej

3

Oj Matej :slight_smile:

here’s the link Cart – Rhodine®

Basically there are 2 sections. The top one is for cart contents and the second is for upsells. If I add height:100dvh to the bottom section I get a huge empty space + vertical scroll bar:

image
image3720Ă—1856 211 KB

4

Hi @Adrenaline22,

thank you for the link. I see what you want to do, but I’m not sure in which way. Below is the CSS that you need, and you will notice that I’ve commented out two lines. Uncomment one or another, based on the effect you want.

.woocommerce{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#brxe-wmuovz{
  /*flex-grow: 1;*/
  /*margin-top: auto;*/
}

Or you can just add the same background color as you have now to the “content” element, and it should have the same effect as flex-grow:1.

Also, I’ll move this topic to the How To, as it’s not a bug.

Best regards,
Matej

5

Make the outer container 100VH

and then make both inside containers 50 VH

If you don’t specify a fixed height, it will only take up the max space it needs, and when it needs more, it will conflict with the other given heights.