掙扎不尋常的頁面佈局

我開始了一個有趣的頁面佈局的想法最近的工作，但我已經打了一個小的（？）問題，我似乎無法找到解決...掙扎不尋常的頁面佈局

什麼我想如下：

寬屏必須看到兩列[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

掙扎不尋常的頁面佈局

回答

相關問題