2

所以我正在使用flexbox 网格并且有一个基本的东西是这样的：

<div class="container">
    <div class="row">
        <div class="sidebar col-xs-3">
            <div class="sidebar-top"></div>
            <div class="sidebar-space"></div>
            <div class="sidebar-bottom"></div>
        </div>
        <div class="content col-xs-9">
            <div class="post"></div>
            <div class="post"></div>
            <div class="post"></div>
            <div class="post"></div>
        </div>
    </div>
</div>

通常看起来像这样：

网站截图

现在我需要顶部的绿色条在滚动时向下跟随，底部的绿色条要粘在可见页面的底部。说嘿的中心位置可能会或可能不会有内容。

我已经尝试了很多东西，大部分来自关于 flex 的 css-tricks 网站和其他各种博客文章，但似乎没有一个能满足我的需要。如果我在 sidebar-top/space/bottom 周围添加一个包装器并将其设置为列而不是行，则它不再获得 .sidebar 和 .content 具有的相同高度。似乎没有任何效果。

这甚至可以用纯css吗？

编辑：相关的css类容器行和col-xs-X都来自链接在问题顶部的flexbox网格

4

0 回答 0