Question

我正在尝试为单页面应用程序设计布局。布局应该填充整页高度和宽度而不滚动。这是布局设计：

Layout figure

所有块都包含一些信息，它们都有固定的高度，只有一个块包含大量数据，它应该是可滚动的（图片上是紫色的）。

目前，我正在为所有UI块使用灵活的盒子，但我无法使紫色块可滚动。如何使紫色块保持灵活性（即占据蓝色块内的所有可用空间），并使其内容可滚动（即内容不应紫色块体）。

也许有更好的解决方案（我相信灵活的盒子有另一种用途）？

Answer 1

我的目标不是使用额外的块（很容易将我的标记转换为div-soup），但在这种情况下我必须这样做。解决方案是使用CSS的位置属性，可以找到原始想法和技术细节here。为了实现滚动内容，我将紫色块变成了一个包装器，它是一个面向列的flex（蓝色块）的子节点，其flex-grow能力设置为1.它占用了父节点内的所有可用空间。包装器相对定位。在这个区块内，我有另一个，具有绝对位置，并按top，bottom，left和right属性调整大小。这是内容存在的块，它overflow设置为自动。

没有包装，我没有解决方案。

这是现场演示：

var scrollElem = document.getElementById('scroll');
for (var i = 0; i < 100; i++) {
  (function() {
    var e = document.createElement('div');
    e.classList.add('item');
    e.innerText = "Content piece";
    scrollElem.appendChild(e);
  }());
}

HTML {
  width: 100vw;
  height: 100vh;
  font-family: sans-serif;
  font-weight: 700;
}
BODY,
#main {
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 0.75em;
}

/*||||*/

#scroll {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  text-align: left;
}
#footer {
  height: 30px;
}

/*||||*/

#main {
  background-color: rgb(255, 215, 125);
}
#upper {
  background-color: rgb(170, 215, 125);
}
#bottom {
  background-color: rgb(200, 50, 180);
}
#left {
  box-shadow: inset -3px 0 15px 0 rgba(60, 5, 20, 0.5);
}
#right {
  box-shadow: inset 3px 0 15px 0 rgba(60, 5, 20, 0.5);
}
#footer {
  box-shadow: inset 0 3px 15px 0 rgba(60, 5, 20, 0.5);
}
#left,
#right,
#footer {
  color: rgba(60, 5, 20, 0.8);
}

/*||||*/

.D-f {
  display: flex;
}
.A-I-c {
  align-items: center;
}
.F-D-c {
  flex-direction: column;
}
.F-D-r {
  flex-direction: row;
}
.J-C-c {
  justify-content: center;
}
.J-C-sa {
  justify-content: space-around;
}
.J-C-sb {
  justify-content: space-between;
}
.F-G-1 {
  flex-grow: 1;
}
.F-G-2 {
  flex-grow: 2;
}
.F-G-3 {
  flex-grow: 3;
}
.F-G-4 {
  flex-grow: 4;
}
.F-G-5 {
  flex-grow: 5;
}
.F-W-nw {
  flex-wrap: nowrap;
}
.F-W-w {
  flex-wrap: wrap;
}
.Pos {
  position: relative;
}
.Pos-a {
  position: absolute;
}

/*||||*/

#upper,
#bottom {
  padding: 1em;
  text-align: center;
}
#upper .popout {
  display: none;
}
#upper:hover .popout {
  display: initial;
}

ASIDE SPAN { font-size : 0.6em; }

<div id="main" class="D-f F-D-c J-C-sb">

  <div id="page" class="F-G-1 D-f J-C-sb">

    <aside id="left" class="F-G-3 D-f J-C-c A-I-c">
      Left aside
      <br/>
      <span><sup>3</sup>/<sub>12</sub></span>
    </aside>

    <div id="content" class="F-G-5 D-f F-D-c">

      <div id="upper">
        <h3>Upper block</h3>
        <div class="popout">Ta-Da!</div>
      </div>

      <div id="bottom" class="F-G-1 D-f F-D-c">
        <h3 class="header">Header</h3>
        <div class="misc">Misc</div>
        <div id="scroll-wrap" class="Pos F-G-1">
            <div id="scroll" class="Pos-a"></div>
        </div>
      </div>

    </div>

    <aside id="right" class="F-G-2 D-f J-C-c A-I-c">
      Right aside
      <br/>
      <span><sup>2</sup>/<sub>12</sub></span>
    </aside>

  </div>

  <div id="footer" class="D-f A-I-c J-C-c">Footer</div>
</div>

Answer 2

为你的＆＃34;紫盒子＆＃34;在css：

.purple-box {
    height: 100px; /* Or whatever height you need */
    overflow: scroll;
}

小提琴：http://jsfiddle.net/518h76km/

编辑：要使其占用任何可用高度，请将calc与height:一起使用。例如：

.blue-box {
    height: 500px; /* Theoretical height, can be anything */
    padding: 10px; /* You can change this too */
}

.grey-header {
    height: 100px; /* Again, this can be anything */
    padding: 10px; /* ... Same here */
}

.purple-box {
    height: calc(100% - 100px - 20px); /* Subtracts the total height of other elements from the total height of the container, making this element use up the rest of the space left */
}

calc实际上是计算容器中剩余的空间。它取容器的总高度 - 100％ - 然后减去其余元素的高度，再加上父元素的填充。这里，它为紫色框的填充减去20，为灰框的高度减去100。你通常不会- 100 - 20，但为了清楚起见，我做了什么。

更新小提琴：http://jsfiddle.net/518h76km/1/

flexbox子中的CSS可滚动内容

2 个答案: