Here's a minimal reproducible example I've written up that can demonstrate this issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
height: 100%;
background-color: red;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-width: fit-content;
min-height: 100%;
}
header, footer {
background-color: white;
}
main {
flex: 1;
background-color: gray;
white-space: nowrap;
}
</style>
</head>
<body>
<header>
<p>what's up! welcome to my awesome website.</p>
</header>
<main>
<h1>big and looooooooooong text to more easily simulate possible horizontal overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
</main>
<footer>
<p>pushed down low!</p>
</footer>
</body>
</html>
Here's a minimal reproducible example I've written up that can demonstrate this issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
height: 100%;
background-color: red;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-width: fit-content;
min-height: 100%;
}
header, footer {
background-color: white;
}
main {
flex: 1;
background-color: gray;
white-space: nowrap;
}
</style>
</head>
<body>
<header>
<p>what's up! welcome to my awesome website.</p>
</header>
<main>
<h1>big and looooooooooong text to more easily simulate possible horizontal overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
</main>
<footer>
<p>pushed down low!</p>
</footer>
</body>
</html>
The goal is for there to be header and footer "strips" at the top and bottom of the page, and for the main content in the middle to fill the most vertical space possible. In case there is a vertical or horizontal overflow, scrollbars should appear.
This works perfectly as intended in a regular desktop browser window:
But as soon as I open it up on a mobile device (or use the mobile device simulation feature in DevTools) something weird starts happening. Along with overflowing horizontally with a scrollbar when there is not enough horizontal space (as it should), it also starts leaving a blank html space/gap at the bottom after the footer like this:
The less horizontal space there is, the larger this space/gap below the footer gets. My guess is that it's something to do with the viewport meta tag, but I'm stumped otherwise.
How would I go on about solving this? Thanks.
I've tried removing the viewport meta tag, at which point it doesn't occur anymore, but the site also starts looking horrible on mobile devices. I expect the mobile version to behave the same as the desktop version being scaled down to be smaller.
Share Improve this question edited Jan 30 at 7:35 Temani Afif 274k28 gold badges365 silver badges484 bronze badges asked Jan 29 at 23:34 BrunoBruno 631 silver badge3 bronze badges 4 |1 Answer
Reset to default 2It seems you need to set html { overflow-x: hidden }
. Also, I added a .app
wrapper:
html {
background-color: red;
display: flex;
overflow-x: hidden;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
overflow: auto;
width: 100%;
}
.app {
flex: auto;
display: flex;
flex-direction: column;
min-width: min-content;
}
header,
footer {
background-color: white;
}
main {
flex: auto;
background-color: gray;
white-space: nowrap;
}
<div class="app">
<header>
<p>what's up! welcome to my awesome website.</p>
</header>
<main>
<h1>
big and looooooooooong text to more easily simulate possible horizontal
overflow
</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
<h1>more easily simulate possible vertical overflow</h1>
</main>
<footer>
<p>pushed down low!</p>
</footer>
</div>
width=device-width
, but don't haveheight=device-height
. May that be the cause? – Kosh Commented Jan 29 at 23:45