Question

基本上，我必须实现stacic scrolling content部分。无论浏览器的大小如何，顶部静态边框和底部静态边框都必须始终可见，并且static scrolling content应该适应这种调整大小的情况。

我在overflow-y:hidden容器中使用overflow-y:scroll的子容器已经玩了很多次，但没有成功。

这是我一直在尝试的：

    .vertical-scroll-viewer {
    overflow: auto;
    height: 100%;
    /*height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;*/
}

    .vertical-scroll-viewer-content {
    overflow: hidden;
    height: 100%;
    /*
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;*/
}

和HTML：

  <html>
<head>   
    <title>test</title>
</head>
<body>
    <h1> Header1</h1>
    <div class="vertical-scroll-viewer">

        <div class="vertical-scroll-viewer-content ">
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
        </div>
    </div>
    <h1> Header2</h1>
</body>
</html>

标题2在滚动条下方消失。

有人知道怎么做吗？谢谢！

Answer 1

这很好。

请注意，重置html / body并使用vh，vw代替100％

html, body { height: 100vh; margin: 0; }

.container {
  width: 100vw;
  height: 100vh;
  background: aqua;
  margin: auto;
  padding: 1px;
}

#right {
  margin-left: 15vw;
  height: 100vh;
  background: yellow;
  overflow:scroll;
}

.static {
  height: 50px;
  background: green;
}

#bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
}

#left {
  width: 15vw;
  height: 100vh;
  background: red;
  float: left;
  position: absolute;
}

#middle {
  height: calc(100vh - 100px);
  overflow-y: scroll; /* it will work */
}

<section class="container">
  <div id="left">
    <div id="top" class="static">Top</div>
    <div id="middle">
      <h2>Middle</h2>
      <p style="height: 9001px;">Lorem ipsum</p>
      <p>Lorem ipsum</p>
    </div>
    <div id="bottom" class="static">Bottom</div>
  </div>
  <div id="right" class="scroll">
    <h2>Right</h2>
    <p style="height: 9001px;">Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </div>
</section>

Answer 2

<div id="div1" style="width:200px; height: 500px;position:relative;">
    <div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
        <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
    </div>
</div>

如何在HTML和CSS中构建静态滚动条

2 个答案: