Question

我使用新的flexbox创建了这个HTML：

<html>
<head>
    <style>
        body {
            margin: 0
        }

        div#outer-container {
            height: 100%;
        }

        div#inner-container {
            display: flex;
            height: 100%;
            flex-direction: row;
        }

        div #left {flex: 1; background-color: yellow;}
        div #center {flex: 5; background-color: #fdd;}
        div #right {flex: 1; background-color: pink;}
    </style>
</head>
<body>

    <div id="outer-container">
        <div>HEADER</div>
        <div id="inner-container">
            <div id="left"></div>
            <div id="center"></div>
            <div id="right"></div>
        </div>
        <div>FOOTER</div>
    </div>
</body>
</html>

它水平扩展，但由于页眉/页脚DIV，它在垂直方向上超过100％高度。你怎么会不发生这种情况？

Answer 1

事实证明 - 将高度设置为80％并使页眉/页脚高度为5％。

Answer 2

或者您可以将外部容器设置为显示：flex，并获取一个内部带有水平弹性框容器的垂直Flexbox容器。然后，您的页脚和标题可以比固定高度更加动态地增长和缩小。

在Chrome中测试过。

<head>
    <style>
        body {
            margin: 0
        }

        div#outer-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: ;
        }

        div#inner-container {
            display: flex;
            flex-direction: row;

            flex-grow: 2;
        }

        div #left {flex: 1; background-color: yellow;}
        div #center {flex: 5; background-color: #fdd;}
        div #right {flex: 1; background-color: pink;}
    </style>
</head>
<body>

    <div id="outer-container">
        <div>HEADER</div>
        <div id="inner-container">
            <div id="left">tet</div>
            <div id="center">tet</div>
            <div id="right">test</div>
        </div>
        <div>FOOTEfeawR</div>
    </div>
</body>
</html>

如何让flexbox填充水平和垂直空间？

2 个答案: