css - 具有多个响应和固定框的布局

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 是 header 元素的一部分，则此分组有意义。

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 是侧边栏的一部分，则此分组有意义。此分组只需很少的修改即可使其适应较窄的视口(viewport):只需隐藏 .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;
}

浏览器支持应包括 Chrome、Opera、Firefox(通常需要在使用 display:-moz-box 的任何地方添加明确的宽度)、IE10、Safari。 http://caniuse.com/flexbox