Question

如何将3个单独的div拉伸到屏幕高度而不会溢出？

我正在使用bootstrap和flexbox，但每当我将行的高度设置为100％时，溢出就会启动。

我希望'内容'（黄色区域）填充页面的大部分，标题（浅绿色区域）和页脚（粉色区域）仅占用100px。

我已经玩过flex-grow和stretch而无济于事。

提前感谢任何有用的输入。

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>

Answer 1

由于Bootstrap中的默认.row类，您遇到了困难。

为这个类设置一个覆盖，使它成为一个flex元素而不是一个块元素，你的状态很好！

现在，当我们将overflow: auto添加到内容容器时，页眉和页脚保持不变，而内容区域会滚动。

另外，我推荐flex元素的简写：

flex: 0 0 100px表示该元素的固定高度为100px（或宽度......取决于您的flex-direction），并且不会拉伸或缩小。

flex: 1只是意味着元素将在所有方向上伸展和缩小。

为了使页眉和页脚的大小更加明显，我将它们设置为flex: 0 0 50px，所以只需在复制代码时将其更改为100px！

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

使用flexbox使3个div适合窗口高度

1 个答案: