如何在 Bulma 中获得固定的侧边栏？

Question

我想要两列，一个左侧边栏和主要内容。

我希望侧边栏是固定的（并在需要时滚动）

  <div class="is-widescreen">
    <div class="columns">
      <aside id="main_sidebar" class="column">
        <h1>test</h1>
      </aside>  
      <div class="column is-four-fifths">
        <div id="editorjs" class="content">
          <!-- see the demo for the effect-->
        </div>
        <button id='save'>save article</button>    
      </div>
    </div>
  </div> 

在editorjs将包含的内容很多，所以我想要的侧边栏内容不被主部上滚动的影响。

演示

Answer 1

position: sticky随着display: inline-block可以帮助您实现这一目标。

此外，设置max-height为页面的全高和overflow-y: auto滚动功能。我还将top和bottom属性设置为0，以便沿其 y 轴拉伸侧边栏。

看看我的JS Bin。