Question

Flex使最终编写全屏设计变得容易。如果没有（Twitter-）Bootstrap，只需几行即可轻松获得固定的标题（导航栏）和全屏DIV

html, body {
    width: 100%; height: 100%; margin: 0;
}
.vbox {
    display: flex; flex-direction: column;
}
.header, .fullscreen {
    padding: 0.25em; margin: 0.25em;
    border: 10px solid #ccc; border-radius: 0.5em;
}
.header {
    height: 50px;
}
.fullscreen
{
    flex: 1;
}

<body class="vbox">
    <div class="header">Fixed-height header</div>
    <div class="fullscreen">fullscreen DIV</div>
</body>

尝试对（Twitter-）Bootstrap 4做同样的事情

html, body {
    width: 100%; height: 100%; margin: 0;
}
.vbox {
    display: flex; flex-direction: column;
}
.container-fluid {
    border: 10px solid #ccc; border-radius: 0.5em;
    flex: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body class="vbox">
    <header>
        <!-- Fixed navbar -->
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <a class="navbar-brand" href="#">Fixed navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarCollapse" aria-controls="navbarCollapse"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <div class="container-fluid">
        fullscreen
    </div>
</body>

不是很有效。 container-fluid的边界会入侵整个帧。 DIV如何占据导航栏之后剩余的100％？

Answer 1

结果表明导航栏是position：fixed的，这意味着它与页面的常规流程不同。要使容器流体从该重叠栏下方显示，请尝试在容器流体上设置“ margin-top：40px” – Thomas Skubicki 1月11日，19：34
试试这个小提琴吗？ jsfiddle.net/chdzevjn

是的，硬值绝对不是最佳的。一种方法是使用em值的CSS3或SASS变量。主要思想是将流入的div从固定导航栏下方移出。

Twitter-Bootstrap4：让DIV占据高度（100％-导航栏）

1 个答案: