html - How to get the header out of the scroll area?

Question

Welcome To Ask or Share your Answers For Others

html - How to get the header out of the scroll area?

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I have a header and a long scrollable content. I'd like the header to not be scrollable. I tried setting overflow: hidden to the header but without success.

How can I get the header out of the scroll area?

Snippet:

<body>
  <div style="overflow: hidden">Header</div>
  <div style="overflow: scroll">Content - very long Content...

See a Plunker with this code.

I also tried setting styles in the body - without success.

I know there's a way to make the header fixed using position fixed, but I don't want to use it because it requires to know the height of the header in advance (for the margin). This requires size duplication and if the header is more complicated, it requires computation.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

265 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T17:56:03+0000

Found the flex magic.

Here's an example of how to do a fixed header and a scrollable content. Code:

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
    </div>
  </body>
</html>

For a full Holy Grail implementation (header, footer, nav, side, and content), using flex display, go to here.

Categories

html - How to get the header out of the scroll area?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags