代码之家 › 专栏 › 技术社区 › Spawnrad

100%高度FlexBox

flexbox css

Spawnrad · 技术社区 · 7 年前

我需要有一个100%高度的flexbox,只有一个50像素的儿童页脚。是否可以不进行计算(100%-50px)?

以下是我的尝试:

body, html{
  height:100%;
}
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color:red;
}

.flex-1 {
  background-color: yellow;
}

.flex-A {
    background-color: blue;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-1-child {
    background-color: purple;
    overflow-y: auto;
    height: calc(100% - 50px);
}
.flex-2-child {
    background-color: green;
    height: 50px;
}

.text{
  height: 500px;
}

<div class="container">
    <div class="flex-1">test</div>
    <div class="flex-A">
        <div class="flex-1-child">
            <div class="text">test2</div>
         </div>
        <div class="flex-2-child">
            <div>test</div>
        </div>
    </div>
</div>

我没有100%的身高。

谢谢你的帮助。

2 回复 | 直到 7 年前

Shu Ding 7 年前

改变 height: calc(100% - 50px); 到 flex: 1; 它将最大限度地扩大其高度。

我想这就是你想要的? https://jsfiddle.net/shuding/3ss44wuk/1

Bram Vanroy 7 年前

简单使用 flex: 1 在动态元素上。

body, html{
  height:100%;
}
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color:red;
}

.flex-1 {
  background-color: yellow;
}

.flex-A {
    background-color: blue;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-1-child {
    background-color: purple;
    overflow-y: auto;
    flex: 1;
}
.flex-2-child {
    background-color: green;
    height: 50px;
}

.text{
  height: 500px;
}

<div class="container">
    <div class="flex-1">test</div>
    <div class="flex-A">
        <div class="flex-1-child">
            <div class="text">test2</div>
         </div>
        <div class="flex-2-child">
            <div>test</div>
        </div>
    </div>
</div>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前