Extend custom overlay to bottom even if overflowing

0
Hi all,   I want to display my main content of a page on top of a white overlay container with a border and margin to the edges.   Normally the data on a page gets displayed like this (only about as high as the content that is on the page):     However, I want this container to fill the whole page regardless of the height of the page (even after the scroll bar appears to load more of the page)     I'm not sure which CSS options I can use to extend this container to the bottom. Does anybody know how I can easily achieve this?
asked
2 answers
1

Hi Lenny, to achieve a full-page white overlay container that stays the full height of the page, even when scrolling you can try this approach:

Steps:

  1. Wrap your main content inside a container widget.

  2. Add a custom class, for example: .full-page-container.

  3. Add CSS to your custom stylesheet (or in your theme/web CSS file):

.full-page-container

{ 

background-color: white; 

border: 1px solid #ccc;

margin: 20px; 

min-height: 100vh;

box-sizing: border-box; 

padding: 20px;

}

Explanation:

  • min-height: 100vh makes sure the container is at least the height of the viewport.

  • It will expand if content inside grows beyond that (and scroll if needed).

  • box-sizing: border-box ensures padding and border are included in the total size.

This should give you a clean, full-height white container with margin and border that looks consistent across all screen sizes.

 

I hope this one helps you! :)

answered
0

Hi Lenny Puente,

Give height 100% to the red cotainer

answered