如何让我的 flexbox 布局占据 100% 的垂直空间? [英] How can I make my flexbox layout take 100% vertical space?

查看：15
本文介绍了如何让我的 flexbox 布局占据 100% 的垂直空间?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何判断 flexbox 布局行占用了浏览器窗口中剩余的垂直空间?

我有一个 3 行的 flexbox 布局.前两行是固定高度，但第三行是动态的，我希望它增长到浏览器的全高.

我在第 3 行有另一个 flexbox，它创建了一组列.为了正确调整这些列中的元素，我需要它们了解浏览器的完整高度——例如背景颜色和底部的项目对齐方式.主要布局最终将类似于:

.vwrapper {显示:弹性；弹性方向:列；flex-wrap: nowrap;justify-content: flex-start;对齐项目:拉伸；对齐内容:拉伸；//高度:1000像素；}.vwrapper #row1 {背景颜色:红色；}.vwrapper #row2 {背景颜色:蓝色；}.vwrapper #row3 {背景颜色:绿色；弹性 1 1 自动；显示:弹性；}.vwrapper #row3 #col1 {背景颜色:黄色；弹性 0 0 240 像素；}.vwrapper #row3 #col2 {背景颜色:橙色；弹性 1 1;}.vwrapper #row3 #col3 {背景颜色:紫色；弹性 0 0 240 像素；}

<div class="vwrapper"><div id="row1">这是标题

<div id="row2">这是第二行

<div id="row3"><div id="col1">第 1 列

<div id="col2">列2

<div id="col3">第 3 列

我尝试添加一个 height 属性，当我将其设置为硬数字时该属性有效，但当我将其设置为 100% 时无效.我知道 height: 100% 不起作用，因为内容没有填满浏览器窗口，但是我可以使用 flexbox 布局复制这个想法吗?

解决方案

html,body,.wrapper的height应该设置为100%code>(为了继承全高)然后只设置一个大于 1 的 flex 值到 .row3 而不是其他的.

.wrapper, html, body {高度:100%；边距:0；}.包装{显示:弹性；弹性方向:列；}#row1 {背景颜色:红色；}#row2 {背景颜色:蓝色；}#row3 {背景颜色:绿色；弹性:2；显示:弹性；}#col1 {背景颜色:黄色；弹性:0 0 240px；min-height: 100%;/* chrome 需要一个问题时间，不再需要 */}#col2 {背景颜色:橙色；弹性:1 1；min-height: 100%;/* chrome 需要一个问题时间，不再需要 */}#col3 {背景颜色:紫色；弹性:0 0 240px；min-height: 100%;/* chrome 需要一个问题时间，不再需要 */}

<div id="row1">这是标题</div><div id="row2">这是第二行</div><div id="row3"><div id="col1">col1</div><div id="col2">col2</div><div id="col3">col3</div>

演示

How can I tell a flexbox layout row consume the remaining vertical space in a browser window?

I have a 3-row flexbox layout. The first two rows are fixed height, but the 3rd is dynamic and I would like it to grow to the full height of the browser.

I have another flexbox in row-3 which creates a set of columns. To properly adjust elements within these columns I need them to understand the full height of the browser -- for things like background color and item alignments at the base. The major layout would ultimately resemble this:

.vwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    //height: 1000px;
}
.vwrapper #row1 {
    background-color: red;
}
.vwrapper #row2 {
    background-color: blue;
}
.vwrapper #row3 {
    background-color: green;
    flex 1 1 auto;
    display: flex;
}
.vwrapper #row3 #col1 {
    background-color: yellow;
    flex 0 0 240px;
}
.vwrapper #row3 #col2 {
    background-color: orange;
    flex 1 1;
}
.vwrapper #row3 #col3 {
    background-color: purple;
    flex 0 0 240px;
}

<body>
    <div class="vwrapper">
        <div id="row1">
            this is the header
        </div>
        <div id="row2">
            this is the second line
        </div>
        <div id="row3">
            <div id="col1">
                col1
            </div>
            <div id="col2">
                col2
            </div>
            <div id="col3">
                col3
            </div>
        </div>
    </div>
</body>

I've tried adding a height attribute, which does work when I set it to a hard number but not when I set it to 100%. I understand height: 100% isn't working, because the content isn't filling the browser window, but can I replicate the idea using the flexbox layout?

解决方案

You should set height of html, body, .wrapper to 100% (in order to inherit full height) and then just set a flex value greater than 1 to .row3 and not on the others.

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

DEMO

这篇关于如何让我的 flexbox 布局占据 100% 的垂直空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆