[英]How can I set height:100% on child of flex item that has flex-grow:1?
Why does setting height:100%
to the child of a flex item (that is also a flex container) that has flex-grow:1
isn't working as expected?为什么将height:100%
设置为具有flex-grow:1
的弹性项目(也是弹性容器)的子项无法按预期工作?
Setting height: 100%
to this child element should make it take the height of it's parent (the flex-grow:1
parent) but it doesn't so I'm clearly wrong.设置height: 100%
到这个子元素应该让它占据它的父元素的高度( flex-grow:1
父元素)但事实并非如此,所以我显然是错误的。 I want to know what height:100%
means in this context.我想知道height:100%
在这种情况下意味着什么。 Why doesn't the item take the full height of it's parent with this setting.使用此设置,为什么项目不占据其父级的全高。
This is the HTML (Bootstrap needed)这是 HTML(需要 Bootstrap)
.theHeader { background-color: #336B87; color: white; padding: 5px 15px; }.project-manager { border-right: 1px solid black; height: 100%; }.flex-content { display: flex; flex-flow: column; height: 100vh; }.flex-grow-this { flex-grow: 1; }
<div class="container-fluid flex-content"> <header class="container-fluid theHeader"> <h1 class="logo">ToDo Manager</h1> </header> <div class="container-fluid row flex-grow-this"> <aside class="col-2 project-manager"> sek </aside> <section class="col-10 to-do-list"> </section> </div> </div><!--end of main div-->
There are a few issues that are resolved by cleaning up the code, and correctly using the Bootstrap grid .通过清理代码并正确使用 Bootstrap 网格,可以解决一些问题。 The layout should simply be container-fluid
> row
> columns
.布局应该只是container-fluid
> row
> columns
。 Don't use nested containers.不要使用嵌套容器。 You don't need the extra CSS for flexbox and height.您不需要额外的 CSS 来设置 flexbox 和高度。 Bootstrap 4 includes Utility classes for this: Bootstrap 4 包括用于此的实用程序类:
Just add CSS for the colors/borders/padding...只需为颜色/边框/填充添加 CSS ...
.theHeader {
background-color: #336B87;
color: white;
padding: 5px 15px;
}
.project-manager {
border-right: 1px solid black;
}
Then the HTML is simply...那么 HTML 就是...
<div class="d-flex flex-column vh-100">
<header class="theHeader">
<h1 class="logo">ToDo Manager</h1>
</header>
<div class="container-fluid d-flex flex-column flex-grow-1">
<div class="row flex-grow-1">
<aside class="col-2 project-manager">
aside
</aside>
<section class="col-10 to-do-list">
</section>
</div>
</div>
</div>
Note: adding height:100%
to the child col-2
will actually prevent it from filling the height of the parent.注意:将height:100%
添加到子col-2
实际上会阻止它填充父项的高度。 Just make sure the parent row
is flex-grow-1
只要确保父row
是flex-grow-1
Demo: https://www.codeply.com/go/IHAHhF8qEa演示: https ://www.codeply.com/go/IHAHhF8qEa
Try adding h-100 class to the parent div尝试将 h-100 类添加到父 div
<div class="container-fluid flex-content"> <header class="container-fluid theHeader"> <h1 class="logo">ToDo Manager</h1> </header> <div class="container-fluid row flex-grow-this h-100" > <aside class="col-2 project-manager"> sek </aside> <section class="col-10 to-do-list"> asd </section> </div> </div>
Is this what you expect?这是你期望的吗?
You have not set margin and padding of body to zero, that's why it is leaving space from top.您没有将 body 的 margin 和 padding 设置为零,这就是它从顶部留出空间的原因。 See the snippet.请参阅片段。
body { padding:0; margin:0; }.theHeader { background-color: #336B87; color: white; padding: 5px 15px; }.project-manager { border-right: 1px solid black; height: 100%; }.flex-content { display: flex; flex-flow: column; height: 100vh; }.flex-grow-this { flex-grow: 1; }
<div class="container-fluid flex-content"> <header class="container-fluid theHeader"> <h1 class="logo">ToDo Manager</h1> </header> <div class="container-fluid row flex-grow-this"> <aside class="col-2 project-manager"> sek </aside> <section class="col-10 to-do-list"> </section> </div> </div><!--end of main div-->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.