Can't make vertical menu reach 100% screen height

[doctor]

I made a webpage with a vertical menu of 710px height and pages are shown on the right of that menu. There are pages that have a lot of text and/or images with a big height and the menu has a height the same as the screen (items of the menu plus some extra height that reaches screen height), but there are pages with fewer text and images with small height (800px and less) and menu shows itself and then stops with a blank area above it. What am I missing? I can't post a sample code as the page is already online, I can send the url if needed with pm (I do not want to have any misunderstandings and get banned so I do not add the url here).

 

[tomliv]

I made a webpage with a vertical menu of 710px height and pages are shown on the right of that menu. There are pages that have a lot of text and/or images with a big height and the menu has a height the same as the screen (items of the menu plus some extra height that reaches screen height), but there are pages with fewer text and images with small height (800px and less) and menu shows itself and then stops with a blank area above it. What am I missing? I can't post a sample code as the page is already online, I can send the url if needed with pm (I do not want to have any misunderstandings and get banned so I do not add the url here).

Hello @doctor

I am sorry if I am missing what you are after here but a "web page" will only appear as deep as the content on that page. The body will only be as deep as the content, unless you specify a height. When trying to force a full height, most people would use a min-height on the html and body:

html, body{
    min-height: 100vh;
}

or

html{
    height: 100%;
}
body{
    min-height: 100vh;
}

The vh unit means 'viewport height'. There are edge cases where 100vh might be a bit off on mobile devices due to the mobile browser's UI taking up space and changing after scroll.

You can also apply the min-height on elements too, such as your menu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>full height</title>
    <style>
        body{
            display: flex;
            margin: 0;
            padding: 0;
        }
        p{
            font-family: 'Courier New', Courier, monospace;
            font-size: 1.5rem;
            color: #333;
        }
        aside{
            min-height: 100vh;
            background-color: #8213e3;
        }
    </style>
</head>
<body>
    <aside>
        sidebar
    </aside>
    <section>
        <div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima.</p>
        </div>
    </section>
</body>
</html>

 

[tomliv]

@doctor Also, you can post URLs here as it is more helpful for troubleshooting if we can inspect pages with dev tools and more accurately understand the issue at hand.

 

[doctor]

@doctor Also, you can post URLs here as it is more helpful for troubleshooting if we can inspect pages with dev tools and more accurately understand the issue at hand.

First of all I made a mistake and I apologize for that. I wrote that the blank space appears above the menu but it appears below it. I tried the solutions you mentioned but didn't help. As for the url, I posted it in another forum and got banned the very next day. It is not **** or anything like that, it is just an educational site. The url: SY.N.TH.E.SI.. Just see that specific page. And after that see: SY.N.TH.E.SI. that appears just like it should be.

 

[Malcolm]

Hey,

Perhaps try using 100vh on the container. From my tests, it appears to fix the issue.

.container {
    min-height: 100vh;
}

If fact, I believe this might be better (as long as you still have the body set to min-height 100vh this should work.

.container {
    min-height: inherit;
}

 

[tomliv]

First of all I made a mistake and I apologize for that. I wrote that the blank space appears above the menu but it appears below it. I tried the solutions you mentioned but didn't help. As for the url, I posted it in another forum and got banned the very next day. It is not **** or anything like that, it is just an educational site. The url: SY.N.TH.E.SI.. Just see that specific page. And after that see: SY.N.TH.E.SI. that appears just like it should be.

I'm seeing the issue as being the use of display:table and related.



I recommend making .container display:flex; and removing any of the table-related styles. Then add min-height: 100vh on the navigation.

 

[doctor]

I'm seeing the issue as being the use of display:table and related.

I recommend making .container display:flex; and removing any of the table-related styles. Then add min-height: 100vh on the navigation.

Your recommendations solved my problem! Thank you very much!!