使用 flexbox 让3个 div 匹配窗口高度

Question

使用 flexbox 让3个 div 匹配窗口高度

htmlcssflexbox

4

如何使三个独立的div在不触发溢出情况下延伸到屏幕高度？我正在使用bootstrap和flexbox，但每当我将行高设置为100％时，就会发生溢出。

我希望'content'（黄色区域）填充页面大部分内容，而页眉（蓝绿色区域）和页脚（粉色区域）仅占用100像素。

我已经尝试过flex-grow和stretch，但都没有成功。

提前感谢您的任何有益的建议。

https://jsfiddle.net/7xtybdrm/1/

CSS：

body {padding-top: 51px;}
html, body {
    background-color: rgb(48, 48, 48);
    height: 100%;
}

.body-container {
    height: 100%;
    display: flex;
    flex-direction: column;

}

.ribbon-container {
    background-color:aqua;
    height: 100px;
    flex: 1;
}

.content-container {
    background-color: yellow;
    display: flex;
    flex: 2;
}

.footer-container {
    height: 50px;
    background-color: pink;
    display: flex;
    flex: 1;
}

HTML：

<head runat="server">
    <title></title>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">asdfasdf.com</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-center">
                    <li><a href="../Default.aspx">Home</a></li>
                    <li><a href="../Pages/About.aspx">About</a></li>
                    <li class="active"><a href="../Pages/Applications.aspx">Applications</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="conatiner-fluid body-container col-lg-12">
        <div class="row">
            <div class="container-fluid ribbon-container">
                Ribbon
            </div>


            <div class="content-container">
                Content
            </div>


            <div class="footer-container">
                Footer
            </div>
        </div>
    </div>
</body>

- mwilson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon · Accepted Answer

您遇到了问题，因为Bootstrap的默认.row类。请设置一个覆盖此类的样式，使其成为一个弹性元素而不是块级元素，这样就没问题了！现在当我们将overflow: auto添加到内容容器中时，页眉和页脚保持不变，而内容区域滚动。此外，我建议使用flex元素的简写：flex: 0 0 100px表示该元素是固定高度为100px（或宽度...取决于您的flex-direction），并且不会拉伸或收缩。flex: 1表示该元素将在所有方向上拉伸和收缩。为了更明显地表明页眉和页脚的固定大小，我将它们设置为flex: 0 0 50px，因此在复制代码时只需将其更改为100px即可！

https://jsfiddle.net/7xtybdrm/4/