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
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.
the real question is, why would it?
why would it stretch the whole viewport if there's not enough content to fill the viewport?
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 🥲
height's default value is auto, so you'll have to set a height on body and html
something like this
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.that I can't diagnose without seeing the HTML and CSS live somewhere like a codepen
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.you'd have to replicate it in a codepen, which usually solves the issue while you're trying to replicate it 🙂
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 🥲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
The final product after compilation is a bunch of html css and js and that you can put in codepen 😉
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.
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
Thanks for the tip, I already resolved the problem!
I should've given
div#root element a min-height: 100vh and it solves everything.