independent scroll column layout in css

Question

I'm trying to make three independent scroll layout in CSS. The independent columns are not scrolling. If I modify the style then the whole page is scrolling. I need to scroll keep the left and right column static while the middle column only scroll. HTML

<div>
 <div id="nav">
  <ul>
    <li>
      <div class="search-container">
        <form action="/action_page.php">
            <input type="text" placeholder="Search Quora" name="search" onfocus="quo(this)">
        </form>
        </div>
    </li>
    <li>
      <a href="#user"><i class="fas fa-user-circle fa-lg"></i></a>
    </li>
    <li>
      <button class="add">Add Question</button>
    </li>
  </ul>
 </div>
 <div class="content">
  <div id="left">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div id="middle">
    <h2>Column 2</h2>
    <p>By way of precaution, when all was complete De Rozier made a few short captive excursions, the balloon being fastened to earth by a rope. But all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried way, into unknown realms where no mortal had been before; they were to entrust their lives to a frail craft whose capabilities had never yet been tested, and at a giddy height they were to soar aloft with an open fire, which at any moment might set light to the inflammable balloon and hurl them to destruction.</p>
 </div>
  <div id="right">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
 </div>
</div>

CSS

#left{
  float: left;
  width: 25%;
  background: blue;
  height: 100%;
  overflow: auto;
  box-sizing: content-box;
  padding: 0.4em;
}
#right {
    float: left;
    width: 25%;
    background: red;
    height: 100%;
    overflow: auto;
    box-sizing: content-box;
    padding: 0.4em;
}
#middle {
  float: left;
  width: 50%;
  background: coral;
  height: 100%;
  overflow: auto;
  box-sizing: content-box;
  padding: 0.4em;
}
.content{
  padding-top:60px;
  padding-left:20px;
  padding-right:20px;
  height: 100%;
}
html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

Whats the problem? I used this solution it worked perfectly fine there. https://jsfiddle.net/hr6au65b/ I think there's some issue with content style in CSS.

Answer 1

The containing (i.e. parent) elements of your content div also need to have height: 100%;. It works in the example fiddle you linked to because the body is 100% height, but you have an extra div in your example between the body and content.

All you need to do is add height: 100%; to the first outer div. You can create a class e.g. height-100pc with this style:

.height-100pc {
  height: 100%;
}

...and add it to any parent containers of your content div, e.g.:

<div class="height-100pc">
   <div id="nav"> ... </div>
   <div ="content"> <!-- Your columns here --> </div>
</div>

Working Example:

#left {
  float: left;
  width: 25%;
  background: blue;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.4em;
}

#right {
  float: left;
  width: 25%;
  background: red;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.4em;
}

#middle {
  float: left;
  width: 50%;
  background: coral;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.4em;
}

.content {
  padding-top: 60px;
  padding-left: 20px;
  padding-right: 20px;
  height: 100%;
}

.height-100pc {
  height: 100%;
}

html,
body {
  height: 100%;
}

*{box-sizing: border-box; }

<div class="height-100pc">
  <div id="nav">
    <ul>
      <li>
        <div class="search-container">
          <form action="/action_page.php">
            <input type="text" placeholder="Search Quora" name="search" onfocus="quo(this)">
          </form>
        </div>
      </li>
      <li>
        <a href="#user"><i class="fas fa-user-circle fa-lg"></i></a>
      </li>
      <li>
        <button class="add">Add Question</button>
      </li>
    </ul>
  </div>
  <div class="content">
    <div id="left">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
    <div id="middle">
      <h2>Column 2</h2>
      <p>By way of precaution, when all was complete De Rozier made a few short captive excursions, the balloon being fastened to earth by a rope. But all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he
        was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried
        way, into unknown realms where no mortal had been before; they were to entrust their lives to a frail craft whose capabilities had never yet been tested, and at a giddy height they were to soar aloft with an open fire, which at any moment might
        set light to the inflammable balloon and hurl them to destruction.</p>
    </div>
    <div id="right">
      <h2>Column 3</h2>
      <p>Some text..</p>
    </div>
  </div>
  </div>

Note that if this div was inside another div, you would have to apply the class to it as well. See the examples below to see what works and what doesn't:

<!-- This WON'T work: -->
<div>
    <div class="height-100pc">
       <div id="nav"> ... </div>
       <div ="content"> <!-- Your columns here --> </div>
    </div>
</div>

<!-- This WON'T work: -->
<div class="height-100pc">
    <div>
       <div id="nav"> ... </div>
       <div ="content"> <!-- Your columns here --> </div>
    </div>
</div>

<!-- This WILL work: -->

<div class="height-100pc">
    <div class="height-100pc">
       <div id="nav"> ... </div>
       <div ="content"> <!-- Your columns here --> </div>
    </div>
</div>

FYI, you should use box-sizing: border-box; instead of box-sizing: content-box; - otherwise the padding is added to the widths and the total width is 100% + padding, so the boxes will wrap.

Answer 2

you can do it by position:sticky .. firstly remove overflow: hidden; from body,html .. then add display:flex to .content class. and add position:sticky and top:0 to #reght and #left id..

#left{
  float: left;
  width: 25%;
  background: blue;
  height: 100%;
  overflow: auto;
  box-sizing: content-box;
  padding: 0.4em;
   position: -webkit-sticky;
  position: sticky;
  top: 0;
  }
#right {
    float: left;
    width: 25%;
    background: red;
    height: 100%;
    overflow: auto;
    box-sizing: content-box;
    padding: 0.4em;
      position: -webkit-sticky;
  position: sticky;
  top: 0;
}
#middle {
  float: left;
  width: 50%;
  background: coral;
  height: 100%;
  overflow: auto;
  box-sizing: content-box;
  padding: 0.4em;
}
.content{
  padding-top:60px;
  padding-left:20px;
  padding-right:20px;
  height: 100%;
  display:flex;
}
html, body {
    height: 100%;

    margin: 0;
    padding: 0;
}

<div>
 <div id="nav">
  <ul>
    <li>
      <div class="search-container">
        <form action="/action_page.php">
            <input type="text" placeholder="Search Quora" name="search" onfocus="quo(this)">
        </form>
        </div>
    </li>
    <li>
      <a href="#user"><i class="fas fa-user-circle fa-lg"></i></a>
    </li>
    <li>
      <button class="add">Add Question</button>
    </li>
  </ul>
 </div>
 <div class="content">
  <div id="left">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div id="middle">
    <h2>Column 2</h2>
    <p>By way of precaution, when all was complete De Rozier made a few short captive excursions, the balloon being fastened to earth by a rope. But all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried way, into unknown realms where no mortal had been before; they were to entrust their lives to a frail craft whose capabilities had never yet been tested, and at a giddy height they were to soar aloft with an open fire, which at any moment might set light to the inflammable balloon and hurl them to destruction.
    t all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried way, into unknown realms where no mortal had been before; they were
    t all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried way, into unknown realms where no mortal had been before; they were
    
    </p>
 </div>
  <div id="right">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
 </div>
</div>