White space at the bottom of web page

HTML & CSS
1

Hi everyone:

My website has a weird white space at the bottom, but I can’t figure out which element caused this problem using Chrome developer tool.

Here is a link to it. https://ipaperclip.net/doku.php?id=start&do=register

Thank you guys.

2

@marktnie I’m receiving a warning that the connection to your site is insecure.

1 Like
3

Me, too.

4

That’s not fair I didn’t get one :frowning:

The space at the bottom of the layout is cause by the 100vh height you added to this element.

.paperclip__login, .paperclip__update, .paperclip__register{
height:calc(100vh - 100px);
}

You made it 100vh (viewport height) and subtracted 100px for the heading above it but you didn’t take into account the padding-top:20vh that the element also has.

You could add box-sizing:border-box to that element to stop the padding increasing the height and then there won’t be so much white space at the bottom of the page. However using height is a flawed concept as that means the layout will be cut-off on smaller viewports so you should be using min-height instead of height.

.paperclip__login, .paperclip__update, .paperclip__register{
min-height:calc(100vh - 100px);
height:auto;
box-sizing:border-box;
}

Accounting for the header using a magic number of 100px is also a bad move as that will change varying on displayed width and user font-size. If you used flexbox or ven the display:table/table-cell properties you can accomplish the layout without magic numbers at all and have a fluid header.

I’m not sure why you applied that background image to that element anyway as you could have applied it to the body element and avoided using any heights or magic numbers also.

There is also one more element that contributes to space at the bottom and is this element.

.a11y{position:absolute !important;left:-99999em !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important;}

The top auto leaves the element taking up space at its auto position and causing a vertical scrollbar. The top auto should be top:-999em to stop it affecting layout.

4 Likes
5

Me neither :slight_smile:

< offtopic>
A deep bow Paul. How the hell did you find that rule in that stylesheet.
< /offtopic>

1 Like
6

It turned out to be the a11y that is causing this trouble. But your advice also matters a lot to me. Thank you!

1 Like
7

That is only a small part of the extra white-space problem as I mentioned and the main problem is the extra height on the aforementioned element. :slight_smile:

Your page has an unecessary large vertical scroll caused by the height and padding that you added which makes your element 120vh tall (-100px).

1 Like
8

Just ferret it out with devtools :slight_smile:

1 Like
9

<off-topic>
This site will help you find out why some people will have trouble accessing your site.
</off-topic>

6 Likes
10

I missed the SSLCertificateChainFile. Thank you gandalf458!

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.