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

如何使引导行填满父容器的高度?

html5 css

-1

nowox · 技术社区 · 6 年前

在下面的示例中,我希望我的行使用以下规则填充父容器的总高度:

B=高度的1/6
C=高度的3/6

<div class="container border border-warning" style="height: 400px">
  <div id="a" class="row row-4 bg-primary">A</div>
  <div id="b" class="row row-2 bg-secondary">B</div>
  <div id="c" class="row row-3 bg-info">C</div>
</div>

https://codepen.io/anon/pen/mjoKpG

我应该如何处理这个问题?

2 回复 | 直到 6 年前

MadPapo 6 年前

添加这些CSS规则

.container {
    display: inline-flex;
    flex-flow: column;
}
.container > #a{
    flex:0.33 1;
}
.container > #b{
    flex:0.17 1;
}
.container > #c{
    flex:0.5 1;
}

Allan 6 年前

#a { height: 33%}
#b { height: 17%}
#c { height: 50%}

https://codepen.io/anon/pen/ejXKQg

推荐文章

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 年前