CODEWITHSUNDEEP
htmlcss
Fernando Urkijo
Fernando Urkijo

Reputation: 3515

How to build a static scrollbar in HTML and CSS

basically I have to achieve the stacic scrolling content section part. The top static border, and the bottom static border have to stay always visible regardless of the size of the browser, and the static scrolling content should adapt to this resizing happening.

enter image description here

I've been playing quite a lot with the overflow-y:hidden container with a overflow-y:scroll in a child container with no success.

This is what I've been trying: 

    .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;*/
}

And the 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>

Header 2 dissapears below the scrollbar.

Does anyone know how to make this? Thanks!

Upvotes: 1

Views: 1636

Answers (2)

mplungjan
mplungjan

Reputation: 177965

This works well.

Notice the reset of the html/body and the use of vh,vw instead of 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>

Upvotes: 3

Michi
Michi

Reputation: 129

<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>

Upvotes: 0

Related Questions