如何在布尔玛获得固定的侧边栏？答案

【问题标题】：How to get a fixed sidebar in Bulma?如何在布尔玛获得固定的侧边栏？
【发布时间】：2020-08-05 09:32:41
【问题描述】：

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

我想要修复侧边栏（如果需要，它可以滚动）

  <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

【问题讨论】：

标签： html css bulma

【解决方案1】：

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

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

查看我的JS Bin。

【讨论】：

不是这样的！我只是想要一些你在这个页面左侧的字面意思，但是如果需要的话，它当然会独立滚动
@relidon 我在这里错过了什么？
如果您在桌面上查看此页面，您会看到#left-sidebar 它是如何修复的？这就是我想要的。有没有办法做到这一点？谢谢
@relidon 好吧，也许你正在寻找这样的东西：jsbin.com/wejomuf？
没错，这就是我想要的。谢谢

【解决方案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>

【讨论】：

不生成固定元素