0

我想创建以下布局。重要的是，这是一个应用程序，应始终填满可用空间。

当窗口变大时，有些盒子的大小需要增加，有些盒子需要保持不变。我不太确定这是否可以使用 html5。假设这只适用于现代浏览器（所以没有 IE）。

这是我要创建的布局。箭头表示盒子是否可以朝那个方向增长。

在此处输入图像描述

这是我到目前为止所能做到的。最大的问题是盒子 3 和 4 没有尽可能大。

我的尝试

<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>
4

2 回答 2

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 是侧边栏的一部分，则这种分组是有意义的。这种分组只需要很少的修改就可以适应更窄的视口：只需将 display 属性隐藏在.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

于 2013-05-22T17:33:40.967 回答
0

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

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

用作：

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

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

于 2013-05-22T17:53:10.260 回答