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

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

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

Answer 2

在布局中使用的最好的东西之一是'calc'方法，允许您将宽度设置为：

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

用作：

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

这将允许您在页面上为固定大小的元素预留空间，并在占用整个查看宽度时保持页面的另一部分响应。 calc方法适用于其他属性。