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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

1 Answer 1

与本文相关的文章

评论列表(0)