Scrollable or not

Make body no-scrollable. Make long-content in body scrollable

by ikapper

HTML

<body>
  <div class="side">
    side content here
    <br>
    <br>
    <p>Use <code>height: -webkit-fill-available;</code> to scroll content.</p>
    <p>So this <code>div.side</code> element is not able to scroll.</p>
  </div>
  <div class="long-content">
    100 lines of p tag
    <script>for(i=0;i<100;i++){document.write("<p>test</p>");}</script>
  </div>
</body>

CSS

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

div.side {
  float: left;
  width: 30%;
  height: 1000px;
  background-color: #F0F0F0;
  padding: 10px;
}

div.long-content {
  float: left;
  width: 69.99%;
  height: -webkit-fill-available;
  overflow: scroll;
  padding: 10px;
}

code {
  background-color: #E5E5E5;
}