html - Why does this strange space start appearing at the bottom of the page only on mobile? - Stack Overflow

admin2025-04-18 5

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 275k28 gold badges366 silver badges486 bronze badges asked Jan 29 at 23:34 Bruno 631 silver badge3 bronze badges

2 You have width=device-width, but don't have height=device-height. May that be the cause? – Kosh Commented Jan 29 at 23:45
@Kosh unfortunately doesn't seem to change anything :( thanks for the suggestion either way! – Bruno Commented Jan 30 at 0:34
1 remove height: 100% from html and use min-height: 100vh on the body – Temani Afif Commented Jan 30 at 7:37
@TemaniAfif still no luck! Tried along with the device-height change but also without and it doesn't look like it makes any special difference. If I look at the page in DevTools, it looks like the body doesn't grow vertically at all (like it does on desktop) to fill that red space below. – Bruno Commented Jan 30 at 11:37

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

It 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>

转载请注明原文地址:http://www.anycun.com/QandA/1744944898a89842.html

html - Why does this strange space start appearing at the bottom of the page only on mobile? - Stack Overflow

1 Answer 1

htmlWhy does this strange space start appearing at the bottom of the page only on mobileStack Overflow