时间戳

首页 > 解决方案 > flex容器内的绝对可滚动div没有固定高度，有可能吗？

css - flex容器内的绝对可滚动div没有固定高度，有可能吗？

问题描述

如何在 flex-box 内将 div 设置为可滚动（绝对）而不用固定高度填充整个视图？

（https://imgur.com/7v5OFas）（右侧部分的错字，其固定宽度，唯一期望的高度是整页）

https://codepen.io/anon/pen/oJyOOp?editors=1000 （如果我将高度添加到红色部分的相对父级，它可以工作，但我不能有固定高度。将 100% 从 html 添加到相对父母也可以，但我也不能这样做。）

目前它是：

<div style="display:flex">
    <div style="flex-grow:1">
        <div style="display:flex">
            <div style="width:45px...">
                ....
            </div>

            <div ...header code>
                ....
            </div>

            <div style="flex-grow:1; top:70px; position: relative">
                <div style="position: absolute; top:0; left:0; right:0; bottom: 0; overflow: auto>
                </div>
            </div>
        </div>
    </div>

   <div style="width:45px...">
       ....
   </div>
</div>

它最终填充了标题高度。

标签： cssflexbox

解决方案

如果没有必要，我会放弃绝对内容的想法，并尝试类似的东西：

html, body {
  min-height: 100%;
  height: 100%;
  margin: 0;
}

.container{
  background: blue;
  display: flex;
  height: 100%;
  flex-flow: row;
}

.sidebar{
  background: red;
    height: 100%;
    width: 200px;
}

.contentWrapper{
  display: flex;
  flex-flow: column;
  flex: 1;
}
.header {
  background: yellow;
  height: 100px;
  width: 100%;
}
.content {
      flex: 1;
    overflow: auto;
}

.scrollableContent {
    height: 3000px;
}
<div class="container">
  <div class="sidebar"></div>
  <div class="contentWrapper">
    <div class="header"></div>
    <div class="content">
      <div class="scrollableContent">
        
      </div>
    </div>
  </div>
</div>

您基本上使每个容器都具有弹性，其内容的不可扩展部分将具有固定的宽度/高度，而另一部分flex: 1则是占用其余空间的简写。

推荐阅读