多列布局和響應

我已經廣泛搜索了SO和其他網站，但並沒有真正找到我正在尋找的內容，因爲我想用流體設計連接乾淨的代碼，這就是爲什麼這篇關於ALA的好文章[命名爲：multicolumnlayouts]對我沒有多大幫助。多列布局和響應

頁面佈局非常簡單：頁眉，容器（包含兩列）和頁腳。右欄包含網站內容，並且應該具有動態高度，而左欄是側欄幷包含菜單，其高度應與內容匹配。如果內容很少，那麼columnt應該佔據窗口高度的100％。

我有一個代碼，準備好了一個小小的缺陷：側欄下方的白色非coloroud區域。 我只需要邊欄拖到頁腳（請參閱示例2）。 純HTML5/CSS解決方案將受到歡迎，但簡單的JavaScript也會受到歡迎。 HTML：

<div class="wrapper"> 

    <header>header H</header> 

    <div class="sidebar"> sidebar S</div> 

    <div class="container clearfix"> 

     container C 

     <div class="el">element E</div> 
     <div class="el">element E</div> 
     <div class="el">element E</div> 
     <div class="el">element E</div> 
     <!-- or more elements --> 
    </div> 

    <footer>footer F</footer> 

</div>

實施例1（少含量=沒有問題）： http://destadesign.com/tag/test7.html

實施例2（問題是HERE）： http://destadesign.com/tag/test7b.html

或者在這裏與小jsfidde窗口：剛在普通的jsfiddle URL後添加「6uHp8」（我不能發佈兩個以上的鏈接）。謝謝！

來源

2013-10-31 Jan Desta

每OP的jsfiddle：http://jsfiddle.net/6uHp8/ –

感謝鏈接 –

怎麼樣.sidebar設置高度：100％; ？ – vitdes

Fiddle

Edited Fiddle

我改變了側欄和容器顯示爲表格單元和包裹其中無論在另一個的div的顯示爲表。然後我將外部div設置爲100％的最小高度減去頁眉和頁腳。我也刪除了浮動和清除修復。

<div class="wrapper"> 

    <header>header H</header> 

    <div class = "awd"> 
     <div class="sidebar"> sidebar S</div> 

     <div class="container"> 

      container C 

      <div class="el">element E</div> 
      <div class="el">element E</div> 

     </div> 
    </div> 

    <footer>footer F</footer> 

</div>

html,body{ height:100%;} 
.wrapper{ 
    height:100%; 
} 
header, footer{ 
    background-color:#6FF; 
    height:10%; 
} 

.awd { 
    display:table; 
    /*min-height:80%;*/ 
    height:80%; /*edited answer*/ 
} 

.sidebar{ 
    background-color:#0F6; 
    height:100%; 
    display:table-cell; 
} 
.container{ 
    width:80%; 
    margin:0 auto; 
    background-color:#0CF; 

    display:table-cell; 
} 
.el{ 
    width: 200px; 
    height: 200px; 
    margin: 5px; 
    background-color:#F96; 
    float:left; 
} 
.clearfix:after 
{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
.clearfix { 
    display: inline-block; 
    vertical-align:top; 
}

來源

2013-10-31 18:40:56 TreeTree

謝謝你的回答，我需要一分鐘的時間來檢查一下。將盡快（今天或明天）。歡呼聲，J –

我已經檢查了你的答案，並且發現它很有幫助（由於將側邊欄延伸到頁腳），但由於在Firefox **（v.24.0）中呈現頁面**，所以它不是一個好的解決方案： **頁面被縮小並且不被拉伸到窗口的全部百分比**（如在之前的頁面版本中沒有顯示：表格屬性）。請參閱[你的小提琴]（http://fiddle.jshell.net/6uHp8/8/show/）。看來沿着顯示器的容器div的min-height屬性：table屬性在Firefox中引起一些問題（IE10和Chrome很好）。你知道如何解決這個問題嗎？謝謝，Jan –

將.awd的最小高度更改爲高度。 – TreeTree

多列布局和響應

回答

相關問題