挣扎不寻常的页面布局

我开始了一个有趣的页面布局的想法最近的工作，但我已经打了一个小的（？）问题，我似乎无法找到解决...挣扎不寻常的页面布局

什么我想如下：

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

本质上栏必须“分裂”周围的内容时，屏幕尺寸变得太狭窄。

我有什么几乎没有。然而，当#root_body高度小于的#root_top_sidebar，那么宽的页面上#root_bottom_sidebar段转移到身体正下方，而不是留一部分作为的侧边栏。

我可以通过添加margin-bottom或体面的min-height到更宽的屏幕的身体内容来解决这个问题，但是这感觉相当hacky ..我确信必须有更好的方法来实现这一点。

我已经试过了这几个不同的想法，但以下几点真难：

浮动两个侧边栏段左或右，使上下侧边栏分割位置没有什么区别。
绝对定位它们是不可行的，因为这三个容器中的任何一个容器都会保存未知数量的数据，并且可以在可见时动态改变高度。

相关代码

修剪HTML，带班和ID保持不变：

<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>

相关CSS：

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

整个项目源can be seen here，与有关位于app/styles/和012内的文件文件夹。

任何HTML/CSS忍者都觉得在这里分享一些智慧？

来源

2014-01-15 ZaLiTHkA

当侧边栏移位时，你想让它们变成水平的吗？ – TimSPQR

这是您正在寻找的功能类型吗？ http://jsfiddle.net/mSLS9/ – TimSPQR

@TimSPQR，我包括示例代码。如果这还不太清楚，下面是我目前的情况的一个工作示例：http://jsbin.com/INEHAviq/1 – ZaLiTHkA

我在清理几个几乎被遗弃的项目时又看到了这个，突然意识到我有多愚蠢。当然，如果我想让某些东西保持屏幕一侧的整个高度，我必须告诉它做到这一点。

牢记这不是一个通用的解决方案，将.content到#root_body的容器中，并使用后续CSS都在我的情况的伎俩，而不会破坏任何东西：

@media (min-width: 768px) { 

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

    #root_body { 
     min-height: 100%; 
    } 

}

我会最在某些时候可能会调整班级任务，但基本的想法仍然存在。

来源

2014-07-09 23:08:30 ZaLiTHkA

挣扎不寻常的页面布局

回答

相关问题