How to make my website stay within window height?

Question

I have

html {
    font-family: Arial, Helvetica, sans-serif; 
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    height: 100%; 
    box-sizing: border-box;
    background-color: $bgcolor;
}

.main-content {
    height: 95%; 
}

header {
    background-color: $header-bg;
    color: $header-text;
    text-align: left;
    padding: 20px;
    height: 5%;
    display: flex; 
}

and I have a div with class main-content and a header. For some weird reason I'm seeing extra whitespace at the bottom of my page. (header has a height of 5% - hence giving main-content height of 95%), any ideas why there's extra space there and how I can remove it??

html is

<body>
        <%- include ('../partials/header.ejs') %>
        <div class="main-content">
            <%- body %>   
        </div>
</body>

header is -

<header>
    <a id="aaa" href="/">AAA</a>
    <nav id="topnav"> 
        --- 
    </nav>   
</header>

use `height: 100vh` instead of `100%`. However if I run that code, I dont get the issue at all. Please add your HTML for a minmal reproduciable code snippet (Ctrl + m) — tacoshy, Jan 17 '21 at 02:28
@tacoshy thanks, I tried that - but I still have this white space at the bottom. Giving the main-content div a bottom-margin of -20px fixes it but that's a pretty silly solution, so I'm still open to any other options! — dani-mari-ali, Jan 17 '21 at 02:31
like I edited, please add a minimal reproduciable code snippet (ctrl + m) that shows the issue. Because I cant reproduce the code with your css according your description. — tacoshy, Jan 17 '21 at 02:32
ok the issue is the padding of the header. the padding: 20px adds 40pixel to the height. 5% on my laptopscreen translates to 15.9px. So the header is 24.1px to tall for my screen and therefor overflows. — tacoshy, Jan 17 '21 at 02:46

score -1 · Answer 1 · edited Jan 17 '21 at 08:05

Please try the snippet of code I am sharing with you in this response. I added the height: 100vh; corresponding to the 100% of the viewport height, applied to both html and body to keep the consistency of the height to the max of the screen since they don't have a default size. Also, since it is kind of hard to calculate the max width of any screen and subtract the 20px of padding that you have on the HEADER tag in each screen scenario, an overflow:hidden rule has been added to this element.

I also added the P tag to test the div with the class .main-content with some actual content on it to test the whole site with some real content on it.

I am assuming you are using some JavaScript HTML Markup template generator language tool such as EJS to create this page, hence I have temporarily replaced <%- body %> and <%- include ('../partials/header.ejs') %> blocks with real content to see the end result. Don't forget about placing them back instead of my hard-coded content, please.

I certainly hope this helps. Cheers, champion!

html {
     font-family: Arial, Helvetica, sans-serif;
     height: 100vh;
     padding: 0;
}
 body {
     padding: 0;
     margin: 0;
     height: 100vh;
     min-height: 100%;
     color:#b2d8d8;
     box-sizing: border-box;
     background-color: #004c4c;
     overflow: hidden;
}
 header {
     background-color: #189ad3;
     color: #f9fafc;
     text-align: left;
     height: 5%;
     padding: 20px;
     display: flex;
     width: 100%;
     position:relative;
}
 .main-content {
     height: 100%;
}
 p {
     padding: 10px;
     text-align: justify;
     text-justify: inter-word;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML5 BoilerPlate - Alvison Hunter</title>
    <meta name="description" content="HTML5 BoilerPlate - Alvison Hunter">
    <meta name="author" content="https://alvisonhunter.com/">
    <link rel="stylesheet" href="css/styles.css?v=1.0"> </head>
<body>
        <header> <a id="aaa" href="/">AAA</a>
            <nav id="topnav"> --- </nav>
        </header>
    <div class="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <script src="js/scripts.js"></script>
</body>
</html>

how is your "anwser" solving the issue? The snippet clearly does not show any "fix". Also an anwser should contain enough details and explantion of what you actually did to solve the issue. — tacoshy, Jan 17 '21 at 02:56
and for that reason you marked it as not useful? I tried it on my end and it worked just fine, did you try to do that first before grading me that low? I don't understand your point, honestly. — Alvison Hunter, Jan 17 '21 at 04:19

How to make my website stay within window height?

1 Answers1