SOLVED: Body/Main Content doesn't span the entire page

How To
1

Hey so I have set my main-content to both my height and min-height to 100vh, but I still have this extra space at the bottom of the page.

According to the inspector, the body & main content doesn’t even reach that far down and I can’t figure out how to make this span the entire page. This never happened using any other builder so I’m really stumped on what to do here.

body img
body img2560×1040 169 KB

2

Does anyone have an answer for this?

3

Hi,
Well, can you show us the body CSS and scroll to the top? Because here your screenshot doesn’t help :wink:
How did you set min-height? Which element?

4

I mean it’s a pretty basic page. I haven’t touched much CSS at all, but here is what the body CSS looks like. It just doesnt span the whole page if the page content is too long like I said.

body css
body css315×931 29.6 KB

5

Well, if layout is not boxed, Bricks body won’t automatically span to the bottom, so you have to explicitely set min-height: 100vh, and I don’t see it anywhere.

So please answer my question or give us a URL, blind analysis is a bit difficult.

6

I understand that, this is a local site so a link isn’t possible, but I’m not a noob at web development. I’ve attempted to set a min-height of 100vh on the main content and the containers inside and the body, it will span down to 100vh but when the content is longer than that, then this extra space at the bottom occurs.

7

Well sorry but without a URL, this is impossible to debug, there are so many factors involved (height, margins, positionning, WP admin bar…) and we don’t really see where your footer starts.

I actually don’t understand what you need exactly, 100vh on main content (main tag or section to have fullpage scroll?) or body (including header+main+footer) with footer pushed at bottom…

But obviously you have something somewhere interfering, since everything is OK for me when simply adding min-height: 100vh on body.
(Which is automatically added by Bricks with boxed layout.)

8

Ok thanks for the feedback, yea unfortunately I can’t get a live link but I will try and double check everything again :slight_smile:

9

Hey Olija,
Welcome to the forum!

Have you tried adding this to Bricks » Settings » Custom CSS:

#brx-content {
  min-height: 100vh;
}

Best regards,
timmse

10

Thanks for the welcome & reply :slight_smile: I figured out my issue, not sure how it happened, but there was a weird margin tucked away somewhere and that’s why there was extra space!

1 Like