问题：

使用Display：Flex用CSS填充剩余的垂直空间

庄康胜

2023-03-14

在3行布局中：

顶部行的大小应根据其内容确定
底部行应具有固定的高度（以像素为单位）
中间行应展开以填充容器

问题是，随着主要内容的扩展，它压扁了页眉和页脚行：

HTML：

<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break - ->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

CSS：

section {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  height: 300px;
}
header {
  flex: 0 1 auto;
  background: tomato;
}
div {
  flex: 1 1 auto;
  background: gold;
  overflow: auto;
}
footer {
  flex: 0 1 60px;
  background: lightgreen;
  /* fixes the footer: min-height: 60px; */
}

小提琴：

http://jsfidle.net/7ylfl/1/（工作，内容小）
http://jsfidle.net/7ylfl/（已断开，内容较大）

我很幸运，我可以使用CSS中最新的和最好的浏览器，而不是传统的浏览器。我想我可以使用flex布局最终摆脱旧的基于表的布局。出于某种原因，它不是在做我想做的事...

这里有很多关于“填充剩余高度”的相关问题，但没有什么能解决我在Flex上遇到的问题。参考文献：

使div填充剩余屏幕空间的高度
填充剩余的垂直仅限空间CSS
在与另一个div共享容器时，有一个div来填写容器的剩余高度/宽度？
使嵌套的div伸展到剩余容器div高度的100%
如何使flexbox布局占用100%垂直空间？
等

共有2个答案

柯波

2023-03-14

下面的示例包括如果扩展的中心组件的内容扩展超过其边界时的滚动行为。此外，中心组件占用视区中100%的剩余空间。

jsfiddle在这里

html, body, .r_flex_container{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}
.r_flex_container {
    display:flex;
    flex-flow: column nowrap;
    background-color:blue;
}

.r_flex_fixed_child {
    flex:none;
    background-color:black;
    color:white;

}
.r_flex_expand_child {
    flex:auto;
    background-color:yellow;
    overflow-y:scroll;
}

可用于演示此行为的html示例

<html>
<body>
    <div class="r_flex_container">
      <div class="r_flex_fixed_child">
        <p> This is the fixed 'header' child of the flex container </p>
      </div>
      <div class="r_flex_expand_child">
            <article>this child container expands to use all of the space given to it -  but could be shared with other expanding childs in which case they would get equal space after the fixed container space is allocated. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
            </article>
      </div>
      <div class="r_flex_fixed_child">
        this is the fixed footer child of the flex container
        asdfadsf
        <p> another line</p>
      </div>

    </div>
</body>
</html>

公羊灿

2023-03-14

让它变得简单：演示

null

section {
  display: flex;
  flex-flow: column;
  height: 300px;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;  /* min-height has its purpose :) , unless you meant height*/
}

html lang-html prettyprint-override"><section>
  <header>
    header: sized to content
    <br/>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

类似资料：

填充剩余垂直空间-仅CSS

我需要用div填充下的的剩余垂直空间。我需要一个唯一的CSS解决方案。
填充剩余的垂直空间-仅CSS

问题内容：我需要填写剩余的垂直空间的下用DIV。我只需要一个CSS解决方案。问题答案：您可以像这样在div 上执行此操作：小提琴 CSS：编辑：替代解决方案根据您的布局和这些div中的内容，可以使它变得更简单，并且标记更少，如下所示： HTML： CSS：
CSS填充剩余宽度

问题内容：我有这个标题栏。我需要searchBar来填补div中剩余的空白。我该怎么做？这是我的CSS 问题答案：您可以使用CSS表格单元格实现此布局。稍微修改您的HTML，如下所示：只需删除两个元素周围的wrapper 元素即可。应用以下CSS：适用于并给它100％的宽度。对于，，，适用。对于，将宽度设置为90％，这将迫使所有其他元素计算出缩小以适合的宽度，搜索栏将展开以填充
Flexbox-填充剩余空间[重复]

我有一个基本的flexbox布局，如下所示。。我试图使顶部的div填充剩余的空间，底部的div是动态的，因此高度根据文本的不同而变化。我的结果是这样的。。在这种情况下，flexbox是最好的选择吗？
使div填充剩余屏幕空间的高度

问题内容：我正在一个Web应用程序上工作，我希望其中的内容能填满整个屏幕的高度。该页面具有标题，其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。我有一个标题和一个内容。目前，我正在使用表格进行布局，如下所示： CSS和HTML 页面的整个高度已填满，不需要滚动。对于content div中的任何内容，设置将其放在标题的正下方。有时，内容将是一个实际表，
如何使div填充剩余的水平空间？

问题内容：我有2个div：页面左侧有一个，右侧是一个。左侧的一个宽度固定，我希望右侧的一个填充剩余空间。问题答案：这似乎可以完成您想要的。

使用Display：Flex用CSS填充剩余的垂直空间

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档