Question

我在页面右侧有一个固定的侧栏（2017-05-13 18:59:54+0200 [-] TX Frame to tcp4:192.168.0.5:48964 : fin = True, rsv = 0, opcode = 1, mask = -, length = 21, repeat_length = None, chopsize = None, sync = False, payload = {"type": "PROCESSED"} 2017-05-13 18:59:54+0200 [-] TX Octets to tcp4:192.168.0.5:48964 : sync = False, octets = 81157b2274797065223a202250524f434553534544227d）但它的内容并不完全可见，因为它没有滚动页面滚动。我本可以在position: fixed css设置中添加overflow-y: scroll。但是不要为侧边栏设置单独的滚动条。是否有选项可以滚动整页滚动。

以下是侧栏的css设置：

.sidebar{}

如果您想调试以查看出现了什么问题，请执行以下操作：https://pagefault.me

由于

Answer 1

使用绝对位置而不是固定，因为您希望它与页面一起滚动。

＆＃13;

body {
  margin: 0;
  padding: 0;
  position: relative;
}

main {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 300vh;
  background: beige;
}

aside {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 300vh;
  background: black;
  color: white;
}

＆＃13;

<main></main>
<aside><aside>

＆＃13;

没有定位的弹性盒解决方案：

＆＃13;

body {
  margin: 0;
  padding: 0;
  display: flex;
}

main {
  width: 80%;
  height: 300vh;
  background: beige;
}

aside {
  width: 20%;
  height: 300vh;
  background: black;
  color: white;
}

＆＃13;

<main></main>
<aside></aside>

＆＃13;

Answer 2

根据我在评论中建议的答案，我能够使用chrome来达到下面的CSS。

1）将一些css添加到.sidebar-nav组件

nav.sidebar-nav {
    position: absolute;
    overflow-y: scroll;
    top: 100px; /*100px to give some room for the sidebar heading (without this, absolute position will make the nav overlap)*/
    left: 15px; /* you can make this zero and add `padding-left: 15px` */
    bottom: 15px; /* leave some room for copyright section */
    right: -17px; /*this may vary from browser to browser (i suggest using the width of the widest scrollbar, then adjust for padding-right)*/
    padding-right: 15px; /*padding to prevent the text from flowing off screen*/
}

2）.container类成为

.sidebar .container{
    max-width: 38rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    position: relative;
    overflow: hidden;
}

3）确保.sidebar-nav绝对

后，页脚位保持在底部

.sidebar .container > p:last-of-type {
    position: absolute;
    bottom: -15px;
}

当然，如原始解决方案中所述，您必须在不同浏览器中测试滚动条宽度，以便在步骤1中使用正确的宽度代替right: -17px。

固定侧栏不会滚动页面内容

2 个答案: