CSS To Make Vertical Scrolling Region Under Fixed Header?

前端未结

关注

 3  1030

耶瑟儿～

Goal: Emulate the fixed header and scrollable content of this StackOverflow page:

Footer under the content scrolls up as the content

相关标签:

3条回答

青春惊慌失措

2020-12-22 01:27

Use overflow-x: auto for the content you want to scroll.

In this case the <main /> block gets its own scrollbar. The content will not go behind the header element.

body {
  margin: 0;
  background-color: red;
  flex-direction: column;
  display: flex;
  height: 100vh;
}

header {
  opacity: .3;
  background-color: yellow;
  height: 50px;
}

main {
  overflow-x: auto;
  flex: 1;
}

<body>
  <header>Header is semi-opaque</header>
  <main>
    <p><a href='#myAnchor'>Go to anchor</a> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    <p><a href='#myAnchor'>Go to anchor</a> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et earebum.
    <p><span style='color:yellow' id=myAnchor>ANCHOR</span>  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    <p> rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  </main>
</body>

0 讨论(0)

不要未来只要你来

2020-12-22 01:45
Give your content container a fixed position, and set its top and height accordingly. Finally, make it scrollable with overflow: auto.

In short, just replace your #content style with this:
```
#content{
  position: fixed;
  top: 50px;
  height: calc(100vh - 50px);
  overflow: auto;
  flex: 1;
}
```
EDIT:

Here's a link to a fork of your pen with the working solution.
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦毁少年i

2020-12-22 01:46
Here's a trick to make the anchor seem bigger so that clicking the link will not cover the actual anchor text. Since you have negative margin, the anchor element will not take up more space. But it will have a scroll position that is 50px taller.
```
:target {
  padding-top: 50px; 
  margin-top: -50px
}
```
This uses the :target pseudo-class.

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

Example: https://codepen.io/haakenlid/pen/oyarva
0 讨论(0)
发布评论:

提交评论
- 加载中...