如何对齐第二个元素高度直到底部答案

【问题标题】：How can Align Second element height until Bottom如何对齐第二个元素高度直到底部
【发布时间】：2022-02-02 21:21:04
【问题描述】：

这是我的代码

<body class="bodyTag h-100">

<div class="navbar">THis Is NavBar</div>

<div class=" d-flex bg-danger flex-column stretch   ">
    <div class="card-header" style=" background-color: #FF9933; width: 100%;">i am header</div>
    <div class="card-body stretch flex-fill" style="background-color: #ffff;"> i am body</div>
    <div class="card-footer bottom-0 " style="background-color: #138808;">i am footer</div>
</div>

我想要页脚必须进入最终意味着在底部，并且基于它第二个白色 Div 必须延伸到页脚

在任何决议中，请帮助我底部固定是仅在底部固定页脚但第二个白色 Div 直到页脚才拉伸

this is output

【问题讨论】：

标签： javascript html css sass

【解决方案1】：

我认为您要做的是根据屏幕高度显示空白。

我写了一个可能解决你问题的sn-p

<body class="bodyTag h-100">

<div class="navbar">Nav Bar</div>

<div style='display: flex; flex-direction: column; height: 100vh;  align-items: stretch;'>
    <div class="card-header" style=" background-color: #FF9933; width: 100% ">i am header</div>
    <div class="card-body stretch flex-fill" style="background-color: #ffff; flex-grow: 1;"> i am body</div>
    <div class="card-footer bottom-0 " style="background-color: #138808;">i am footer</div>
</div>

如您所见，我所做的是应用 100vh（屏幕高度）的高度，对齐内容拉伸并将 flex:1 应用于白色部分，这意味着它将占用最多的空间。假设您想要相同高度的页眉、正文和页脚，您只需将 flex:1 应用于每个

【讨论】：

是的，但是提供 100Vh 也会增加尺寸体！，所以滚动条会出现在正文中，在（白色第二个div）之间，项目会出现并且滚动会出现在其中，首先导航栏然后在可用空间中它会出现！