具有多個響應和固定框的佈局

Question

我想創建以下佈局。重要的是，這是一個應用程序，應該始終填充可用空間。

當窗口增長並且有些需要保持不變時，有些框需要增加尺寸。我不太確定這是否甚至可以使用html5。假設這隻適用於現代瀏覽器（所以沒有IE）。

這是我想要創建的佈局。箭頭指示盒子是否可以在該方向上生長。

這是我能得到這麼遠。最大的問題是盒子3和盒子4不夠大。

My try

<div class="fixed-right-col" style="width: 300px; margin-right: 20px; min-height: 100%; float: right;"> 
    <div style="height: 200px; background-color: gray;"> 
     2 
    </div> 
    <div style="background-color: olive; bottom: 500px;"> 
     4 
    </div> 
</div> 
<div class="container-fluid" style="width: auto; min-height: 100%; overflow: hidden;"> 
    <!-- Probleme + Menü --> 
    <div class="row-fluid"> 
     <div class="span6" style="background: red; min-height: 300px">1</div> 
     <div class="span6" style="background: aqua; min-height: 300px;">1</div> 
    </div> 
    <!-- Chat + Userlist --> 
    <div class="row-fluid" style="min-height: 100%;"> 
     <div class="span12" style="background: green; height: auto;"> 
      <div style="height: auto;">3</div> 
      <input type="text" style="width: auto;" value="5"> 
     </div> 
    </div> 
</div> 

Answer 1

首先，你需要在你想怎麼組的元素決定。這兩種解決方案都使用Flexbox。您可以使用display: table/table-row/table-cell元素重新創建此元素，但需要額外元素才能完成此操作。

（1，1，2）（（3,5），4）

這種分組有道理的，如果元件1,1，和圖2是一個頭部元件的一部分。

http://codepen.io/cimmanon/pen/kihgd

標記：

<div class="container"> 
    <header class="group1"> 
    <div class="a"> 
     1 
    </div> 
    <div class="a"> 
     1 
    </div> 
    <div class="b"> 
     2 
    </div> 
    </header> 
    <div class="group2"> 
    <div class="group2a"> 
     <article class="c"> 
     3 
     </article> 
     <footer class="e"> 
     5 
     </footer> 
    </div> 
    <aside class="d"> 
     4 
    </aside> 
    </div> 
</div> 

CSS：

body, html { 
    height: 100%; 
} 

.container { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

/* group 1, the header */ 
header.group1 { 
    display: flex; 
    height: 10em; 
    background: yellow; 
    padding: .5em; 
} 

.a { 
    flex: 1 auto; 
    background: aqua; 
    margin: .5em; 
} 

.b { 
    width: 10em; 
    background: grey; 
    margin: .5em; 
} 

/* group 2 */ 
.group2 { 
    display: flex; 
    flex: 1; 
    margin: .5em; 
} 

.group2a { 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
} 

article.c { 
    flex: 1; 
    background: pink; 
    margin: .5em; 
} 

footer.e { 
    height: 5em; 
    background: green; 
    margin: .5em; 
} 

aside.d { 
    width: 10em; 
    background: olive; 
    margin: .5em; 
} 

（（1，1），3,5），（2,4）

這種分組如果元素2和4是邊欄的一部分，則是合理的。這個分組只需要很少的修改就可以適應更窄的視口：只需隱藏.container上的顯示屬性即可。

http://codepen.io/cimmanon/pen/GCrFa

標記：

<div class="container"> 
    <header class="group1"> 
    <div class="a"> 
     1 
    </div> 
    <div class="a"> 
     1 
    </div> 
    <div class="b"> 
     2 
    </div> 
    </header> 
    <div class="group2"> 
    <div class="group2a"> 
     <article class="c"> 
     3 
     </article> 
     <footer class="e"> 
     5 
     </footer> 
    </div> 
    <aside class="d"> 
     4 
    </aside> 
    </div> 
</div> 

CSS：

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.container { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    height: 100%; 
} 

/* group 1, the header */ 
header.group1 { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    height: 10em; 
    background: yellow; 
    padding: .5em; 
    border: 1px solid; 
} 

.a { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1 auto; 
    -ms-flex: 1 auto; 
    flex: 1 auto; 
    background: aqua; 
    margin: .5em; 
} 

.b { 
    width: 10em; 
    background: grey; 
    margin: .5em; 
} 

/* group 2 */ 
.group2 { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
    padding: .5em; 
    border: 1px solid; 
} 

.group2a { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
} 

article.c { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
    background: pink; 
    margin: .5em; 
} 

footer.e { 
    height: 5em; 
    background: green; 
    margin: .5em; 
} 

aside.d { 
    width: 10em; 
    background: olive; 
    margin: .5em; 
} 

瀏覽器支持應該包括鉻，歌劇，火狐（通常需要添加顯式寬度的任何地方display: -moz-box使用）， IE10，Safari。http://caniuse.com/flexbox

Answer 2

一個在佈局中使用的將是「鈣」的方法最好的東西，可以讓你設置的寬度是這樣：

.calcWidth { 
    width: 100% - 200px; 
} 

用作：

.calcWidth { 
    width: calc(100% - 200px); 
    width: -moz-calc(100% - 200px); /* Firefox */ 
    width: -webkit-calc(100% - 200px); /* Chrome/Safari */ 
} 

這將允許您在頁面上爲固定尺寸的元素預留空間，並在佔用整個查看寬度時保持頁面的另一部分響應。計算方法將與其他屬性一起使用。