flexbox子元素中的CSS可滚动内容

Posted 2023-03-07

【中文标题】flexbox子元素中的CSS可滚动内容

【英文标题】：CSS Scrollable content within flexbox child

【发布时间】：2014-12-14 00:10:18

【问题描述】：

我正在尝试为单页应用程序设计布局。布局应填满整个页面的高度和宽度，而无需滚动。这是布局设计：

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

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

也许有更好的解决方案（我相信灵活的盒子还有其他用途）？

【参考方案1】：

我的目标不是使用额外的块（这很容易将我的标记转换为 div-soup），但在这种情况下我不得不这样做。解决方法是使用 CSS 的 position 属性，原创思想和技术细节可以在here 找到。 为了实现滚动内容，我将紫色块变成了一个包装器，它是面向列的 flex（蓝色块）的子级，flex-grow 能力设置为 1。它占据了父级中的所有可用空间。 Wrapper 是相对定位的。在这个块内我有另一个块，具有绝对位置和大小由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>

【参考方案2】：

为您在 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/

【讨论】：

你的答案和上一个几乎一样（已经消失了），在这种情况下紫色框总是有100px的高度，但我希望它是灵活的，即紫色块应该占据所有可用空间在蓝色块内，但其内容应该是可滚动的。

我已经用代码 sn-p 更新了我的问题，请看一下。

嗯，我以前从未使用过calc()，现在看来它得到了很好的支持，我会发布反馈。谢谢，乔治！

是的，calc() 可以在这种情况下创造奇迹。很高兴我能帮助你！ :D

最后，使用flexible boxes 和不使用calc()，我已经完全实现了我所需要的。这个想法被发现 [blog.stevensanderson.com/2011/10/12/….请注意，上部块包含隐藏元素，当出现缩小底部 puple 块时（这在我的应用程序中是必需的）。