挣扎着异常的页面布局

Question

我最近开始研究一个有趣的页面布局想法，但我遇到了一个小问题（？）我似乎无法找到解决方案......

我想要的如下：

• 宽屏必须看到两列[body] + [sidebar]布局。
  • body元素左侧是一个宽列。
  • sidebar将在右侧显示为单个窄列，但实际上由两个堆叠的div组成。
• 窄屏幕必须看到单个列布局，跨越全宽度，就像Bootstrap一样。
  • 第一个块必须是sidebar-top
  • 第二个块必须是body
  • 第三个区块必须为sidebar-bottom

基本上，当屏幕尺寸过窄时，侧边栏必须“分割”内容。

我的内容几乎就在那里..但是，当#root_body的高度小于#root_top_sidebar的高度时，则在#root_bottom_sidebar的宽页上margin-bottom 1}}段直接转移到正文下方，而不是作为侧边栏的一部分。

我可以通过在身体内容中添加min-height或体面<div class="row"> <div id="root_top_sidebar" class="col-sm-5 col-md-4"> <!-- content --> </div><!-- .root_top_sidebar --> <div id="root_body" class="col-sm-7 col-md-8 accordion-group"> <!-- content --> </div><!-- #root_body --> <div id="root_bottom_sidebar" class="col-sm-5 col-md-4"> <!-- content --> </div><!-- .root_bottom_sidebar --> </div> 以获得更广泛的屏幕来解决这个问题，但这感觉相当笨拙......我敢肯定必须有更好的实现这一目标的方法。

我为此尝试了一些不同的想法，但以下几点让生活变得困难：

• 将左侧或右侧的两个侧边栏浮动对底部侧边栏的位置没有任何影响。
• 绝对定位它们是不可行的，因为三个容器中的任何一个都将容纳未知数量的数据，并且可以在可见时动态改变高度。

相关代码

修剪HTML，类和ID保持不变：

@media (min-width: 768px) {
    #root_top_sidebar {
        float: right;
    }
}

相关CSS：

app/styles/

完整的项目来源can be seen here，相关文件位于app/views/和{{1}}文件夹中。

任何HTML / CSS忍者都喜欢在这里分享一些智慧吗？

Answer 1

我在清理几个几乎被遗弃的项目时再次看到了这一点，突然意识到我是多么愚蠢。当然，如果我想要保持屏幕一侧的整个高度，我必须告诉它这样做。

请记住，这不是一个通用的解决方案，将.content添加到#root_body的容器中，并使用后面的CSS在我的情况下完成了这个技巧，而不会破坏其他任何内容：

@media (min-width: 768px) {

    html, body,
    .container,
    .row.content {
        min-height: 100%;
        height: 100%;
    }

    #root_body {
        min-height: 100%;
    }

}

我很可能在某些时候调整课堂作业，但基本的想法仍然存在。