admin管理员组

文章数量:1323529

Trying to make a layout that has a header, that scroll vertically off the page like normal. But if one uses the HTML scrollbars (important that it's the HTML scroll bars, so one does not have to hunt for the horizontally scrolls bars, the HTML scroll bars are always shown at the bottom of the viewport), with the header stuck horizontally. It's a layout for where the content is wider than the view port, but one wish to have the header always shown horizontally, but allow it to scroll vertically off the screen for screen space.

When one scrolls to the right, next to the header is generally a blank open space, I wish for the header to stay sticky horizontally (but as mentioned before scroll vertically).

Here you can see when I scroll horizontally on desktop, the golden header stays in the place and fills the full width.

But as soon as you switch to mobile it no longer works, you can see the white gap here when I scroll horizontally, instead of the header remaining stuck in place:

This code snippet does not switch to mobile view, so you have to copy and paste this into a file and try it for yourself if you wish to see what's going on in mobile:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- For mobile device scaling -->
<style>
    * {
        box-sizing: border-box;
    }
    html {
        overflow-y: scroll;
        width: max-content;
    }
    body {
        margin: 0;
    }
    header {
        background: goldenrod;
        border-right: 1px solid red;
        position: sticky;
        left: 0;
        width: calc(100vw - 15px);
    }
    main {
        width: 120vw;
        height: 120vh;
        background: gray;
    }
</style>
</head>

<body>
    <header> Header
    </header>
    <main>
        <div>Main stuff</div>
        <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
    </main>
</body>

</html>

This code snippet does NOT switch to mobile view and show the issue, just provided for completeness.

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  width: max-content;
}

body {
  margin: 0;
}

header {
  background: goldenrod;
  border-right: 1px solid red;
  position: sticky;
  left: 0;
  width: calc(100vw - 12px);
}

main {
  width: 200vw;
  height: 120vh;
  background: gray;
}
<header>Header, should stick horizontally, scroll vertically as usual
</header>
<main>

  <div>Main stuff</div>
  <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
</main>

Trying to make a layout that has a header, that scroll vertically off the page like normal. But if one uses the HTML scrollbars (important that it's the HTML scroll bars, so one does not have to hunt for the horizontally scrolls bars, the HTML scroll bars are always shown at the bottom of the viewport), with the header stuck horizontally. It's a layout for where the content is wider than the view port, but one wish to have the header always shown horizontally, but allow it to scroll vertically off the screen for screen space.

When one scrolls to the right, next to the header is generally a blank open space, I wish for the header to stay sticky horizontally (but as mentioned before scroll vertically).

Here you can see when I scroll horizontally on desktop, the golden header stays in the place and fills the full width.

But as soon as you switch to mobile it no longer works, you can see the white gap here when I scroll horizontally, instead of the header remaining stuck in place:

This code snippet does not switch to mobile view, so you have to copy and paste this into a file and try it for yourself if you wish to see what's going on in mobile:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- For mobile device scaling -->
<style>
    * {
        box-sizing: border-box;
    }
    html {
        overflow-y: scroll;
        width: max-content;
    }
    body {
        margin: 0;
    }
    header {
        background: goldenrod;
        border-right: 1px solid red;
        position: sticky;
        left: 0;
        width: calc(100vw - 15px);
    }
    main {
        width: 120vw;
        height: 120vh;
        background: gray;
    }
</style>
</head>

<body>
    <header> Header
    </header>
    <main>
        <div>Main stuff</div>
        <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
    </main>
</body>

</html>

This code snippet does NOT switch to mobile view and show the issue, just provided for completeness.

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  width: max-content;
}

body {
  margin: 0;
}

header {
  background: goldenrod;
  border-right: 1px solid red;
  position: sticky;
  left: 0;
  width: calc(100vw - 12px);
}

main {
  width: 200vw;
  height: 120vh;
  background: gray;
}
<header>Header, should stick horizontally, scroll vertically as usual
</header>
<main>

  <div>Main stuff</div>
  <div>Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong</div>
</main>

Share Improve this question asked Jan 15 at 11:04 run_the_racerun_the_race 2,7723 gold badges53 silver badges77 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

The problem is on width: calc(100vw - 12px). That's subtracting a fixed amount of pixels from the view width that's smaller in mobile. As a result, the bar doesn't seem to reach the right border of the window.

Try using width: calc(100vw) or width: calc(99vw) or create @media query.

本文标签: CSS stick an element horizontally only works on desktopnot mobileStack Overflow