How to disable bottom margin in HTML/CSS?

Question:
How do I disable the margin at the bottom of an HTML page? I have made the background red so that it’s easy to see. I have an iframe that is 90vh height and a navbar that is 10vh height. That is 100. However, if I keep scrolling long enough I encounter the body of the webpage. Why is this? I want the navbar to split the page with my iframe and there to be no extra space.
image
Note: This Repl is Python Flask but that part is inconsequential. I’m only looking at CSS as I already have the HTML and Flask the way I want it.

Repl link:
The HTML page
https://replit.com/@CoderElijah/PikaBot-Archives#templates/docframe.html
Some CSS it uses
https://replit.com/@CoderElijah/PikaBot-Archives#static/css/main.css
Working demo of problem (just sroll to the end of the page and a little more)
https://pikabot-archives.coderelijah.repl.co/docs/beta/Burritoville

Odd, the background should not show under the margin, only the padding. Try adding this

body {
    border: 0;
    margin: 0;
}
2 Likes

Try setting the overflow-y of the body to hidden

That fixed it. Thanks! I marked your post as the solution.

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