如何在 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 会包含很多内容，所以我希望边栏内容不受主要部分滚动的影响。

Demo

Answer 1

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

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

看看我的 JS Bin。

Answer 2

如果你想要完全由 Bulma 制作的侧边栏，这是我的解决方案 无需 CSS 修改：

<div class="columns">


<div class="column is-one-fifth">

  <aside class="menu">
    <p class="menu-label">
      General
    </p>
    <ul class="menu-list">
      <li><a>Dashboard</a></li>
      <li><a>Customers</a></li>
    </ul>
    <p class="menu-label">
      Administration
    </p>
    <ul class="menu-list">
      <li><a>Team Settings</a></li>
      <li>
        <a class="is-active">Manage Your Team</a>
        <ul>
          <li><a>Members</a></li>
          <li><a>Plugins</a></li>
          <li><a>Add a member</a></li>
        </ul>
      </li>
      <li><a>Invitations</a></li>
      <li><a>Cloud Storage Environment Settings</a></li>
      <li><a>Authentication</a></li>
    </ul>
    <p class="menu-label">
      Transactions
    </p>
    <ul class="menu-list">
      <li><a>Payments</a></li>
      <li><a>Transfers</a></li>
      <li><a>Balance</a></li>
    </ul>
  </aside>

</div>

<div class="column">

  <div class="block">
    This text is within a <strong>block</strong>.
  </div>
  <div class="block">
    This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
  </div>
  <div class="block">
    This text is within a <strong>third block</strong>. This block has no margin at the bottom.
  </div>
</div>

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

How to get a fixed sidebar in Bulma?

html

css

bulma