How to get the header out of the scroll area?

前端未结

关注

 2  744

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.

相关标签:

2条回答

既然无缘

2020-12-10 17:38

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.

0 讨论(0)

北荒

2020-12-10 17:38
Remove your inline styles first. Then add this css.
```
html , body {
  margin: 0px;
  height: 100%;

}

.content {
  height: 100%;
  overflow: scroll;
}
```
https://jsfiddle.net/sthsuuec/11/
0 讨论(0)
发布评论:

提交评论
- 加载中...