在另一列末端之后水平扩展布尔玛列

Question

我正在尝试在布尔玛框架中进行第一个设计； 我对网站内容部分进行了三列设计。

但是我希望第二列结束时中间的列可以增长到全高。

当前设计看起来像这样

我想实现的目的是使带有Evens Calendar列结束后的文章的列增长到全宽。

当前我的代码如下：

  <main id="site-content">    
<div class="columns is-multiline">
  <div id="site-content-sidebar-left" class="column is-one-fifth">
    <h2 class="title is-2">News</h2>
  </div>
  <div id="site-content-primary" class="column">
    <article class="column">
      <h2 class="title">2nd article</h2>
      <p>jskjdskjdksjkdsjsd</p>
      <span>
        March 1, 2019 | 
        <a href="http://localhost/author/mark/" title="Posts by Mark Stopka" rel="author">Mark Stopka</a> | 
          <a href="http://localhost/category/uncategorized/" rel="category tag">Uncategorized</a>            </span>
        <hr />
      </article>
      <article class="column">
        <h2 class="title">Hello world!</h2>
        <p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
        <span>
          February 28, 2019 | 
          <a href="http://localhost/author/mark/" title="Posts by Mark Stopka" rel="author">Mark Stopka</a> | 
          <a href="http://localhost/category/uncategorized/" rel="category tag">Uncategorized</a>            </span>
        <hr />
      </article>
    </div>
    <div id="site-content-sidebar-right" class="column is-one-fifth">
      <h2 class="title is-3">Events Calendar</h2>
    </div>
  </div>

我的风格如下：

#site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#site-content {
  flex: 1;
  margin: 1rem;
}

#site-content-sidebar-left {
  border: 1px solid red;
  border-radius: 25px;
}

#site-content-primary {

}

#site-content-sidebar-right {
  border: 1px solid red;
  height: fit-content;
  border-radius: 25px;
}

当id="site-content-primary"不再被内容占据时，如何使#site-content-sidebar-right在django-modeltranslation下方展开？

Answer 1

好，问题解决了，我已经搬走了

<div id="site-content-sidebar-right" class="column is-one-fifth">
  <h2 class="title is-3">Events Calendar</h2>
</div>

进入<div id="site-content-primary" class="column">，并将其设置为float: right;。