Kevin Powell - Community•2y ago

Weird space below my page

Hi everyone! For some reason, I have a weird empty space below my page, and I can't figure out where is it coming from. It's definitely not some rogue margin or padding. Even the whole html component won't stretch all the way to the bottom. How can I fix it? I use React with TailwindCSS. Here is a screenshot of how it looks like. I want to toggle between dark and light mode, and this white stripe remains white no matter what I do. It goes away if I just change the color on <body>, but I don't think it's possible in React.

14 Replies

Aleksandr M.OP•2y ago

Same goes for html, but the gap is a bit lower because I have some margin on my main div, but if you remove it, it won't go away.

Jochem•2y ago

the real question is, why would it? why would it stretch the whole viewport if there's not enough content to fill the viewport?

Aleksandr M.OP•2y ago

The problem is that I want to implement toggle between dark and light mode, and if I try to switch the color of the background, there would be this white stripe at the bottom of the page 🥲

Jochem•2y ago

height's default value is auto, so you'll have to set a height on body and html something like this

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

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

Aleksandr M.OP•2y ago

Thank you, it almost worked. I did that, and now both body and html stretch normally. However, it didn't work for my #root div. I tried setting it to min-height: 100%, but no effect.

Jochem•2y ago

that I can't diagnose without seeing the HTML and CSS live somewhere like a codepen

Aleksandr M.OP•2y ago

Unfortunately, I don't think I can put the whole React app with Tailwind on Codepen. Thanks anyway. Now I have to figure out why #root doesn't want to stretch.

Jochem•2y ago

you'd have to replicate it in a codepen, which usually solves the issue while you're trying to replicate it 🙂

Aleksandr M.OP•2y ago

Weirdly enough, any changes I make to #root in CSS file are ignored completely by the browser. Strange. I believe it would take enormous amount of time to redo. 🥹 I wish I could just change the color on my <body> tag, because it works and you can ignore the fact that there is an empty space at the bottom 🥲

Jochem•2y ago

you can also just copy/paste the contents of the body tag in the DOM in the dev tools, and do the same for some CSS files

Mannix•2y ago

The final product after compilation is a bunch of html css and js and that you can put in codepen 😉

Aleksandr M.OP•2y ago

Great, I'll try it! Huh, didn't quite work. It doesn't fetch any info from API like it supposed to, so no way to test it like that.

Jochem•2y ago

the fully loaded page should have all of the API loaded info inside the DOM in the devtools you can't copy from "view source" if there's any data loaded client side, but the Inspector tab should have everything, and at least in FF you can right click a node and just click copy, inner html

Aleksandr M.OP•2y ago

Thanks for the tip, I already resolved the problem! I should've given div#root element a min-height: 100vh and it solves everything.

Gaming

Programming

Weird space below my page