如何让弹性框填充水平和垂直空间

我有这个使用新的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%的高度。你怎么能不让这种情况发生？

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

或者

你可以将外部容器设置为显示：flex，并获得一个垂直的flexbox容器，里面有一个水平的flexbox容器。然后，页脚和页眉可以比固定高度更动态地增长和收缩。

在铬中测试。

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

相关内容

最新更新

热门标签：