如何使 div 相对于剩余高度垂直居中

Question

我使用 flexbox 制作了一个带有“粘性”页脚的网页（如果内容很大，页脚在内容的底部，如果内容很小，页脚在视口的底部）。我现在正在尝试这样做，如果内容足够小，内容将位于剩余高度的中心（vh - 导航栏的高度 - 页脚的高度）。下面是一张图片来演示我刚才所说的。

这是我的代码。

<div id="app">
    <div>
        <div class="d-flex flex-column full-height">
            <div id="div-top" class="d-flex flex-column" style="flex: 2">
                <nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
                    <div class="container">
                        <a class="navbar-brand" href="/">
                            <img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
                        <button type="button" class="navbar-toggler">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse">
                            <ul class="ml-auto navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="false" href="/about">About</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="false" href="/aaar">Ada</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <br>
                <div class="container d-flex align-items-center justify-content-center h-100" id="div-1">
                    <div class="row w-100">
                        <div class="text-center col col-md-12 col-lg-6">
                            <img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
                            <h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
                            <div>
                                <a href="#" class="btn btn-primary">Add</a>
                                <p>description</p>
                            </div>
                            <p class="pt-4 text-muted">v1.0.0</p>
                        </div>
                        <div class="d-none d-lg-block col col-lg-6">test</div>
                    </div>
                </div>
            </div>
            <footer class="footer">
                <div class="text-center container">
                    <span class="d-block">Copyright &copy; 2018</span>
                    <span class="text-muted">Some text here</span>
                </div>
            </footer>
        </div>
    </div>
</div>
#div-1 {
  background-color: #00ff00;
}

.full-height {
    height: 100vh;
}

.footer {
    margin: auto auto 0 auto;
    width: 100%;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    background-color: #ff0000;
}

内容的高度不会改变，我只是想支持多种屏幕尺寸。通过使用这种方法，我遇到了 2 个问题。首先，它不适用于移动设备的横向模式（使用 chrome 开发工具模拟）。其次，导航栏的高度缩小了。

jsfiddle 可用here。您也可以将其与the original version 进行比较。在 URL 末尾添加 /embedded/result/ 将全屏打开结果。感谢您的帮助！

Answer 1

如果您更改以下内容，它将按您的要求工作：

• 在.full-height 规则中更改为min-height: 100vh

• 删除align-items-center/h-100并在id="div-1"元素类列表中添加m-auto

请注意，标记中</nav> 之后的<br> 无效，因此我将其删除。如果你想要一个间隙，请使用边距的填充

Updated fiddle

堆栈sn-p

#div-1 {
  background-color: #00ff00;
}

.full-height {
    min-height: 100vh;
}

.footer {
    margin: auto auto 0 auto;
    width: 100%;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    background-color: #ff0000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>

<div id="app">
    <div>
        <div class="d-flex flex-column full-height">
            <div id="div-top" class="d-flex flex-column" style="flex: 2">
                <nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
                    <div class="container">
                        <a class="navbar-brand" href="/">
                            <img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
                        <button type="button" class="navbar-toggler">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse">
                            <ul class="ml-auto navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="false" href="/about">About</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="false" href="/aaar">Ada</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <div class="container d-flex justify-content-center m-auto" id="div-1">
                    <div class="row w-100">
                        <div class="text-center col col-md-12 col-lg-6">
                            <img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
                            <h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
                            <div>
                                <a href="#" class="btn btn-primary">Add</a>
                                <p>description</p>
                            </div>
                            <p class="pt-4 text-muted">v1.0.0</p>
                        </div>
                        <div class="d-none d-lg-block col col-lg-6">test</div>
                    </div>
                </div>
            </div>
            <footer class="footer">
                <div class="text-center container">
                    <span class="d-block">Copyright &copy; 2018</span>
                    <span class="text-muted">Some text here</span>
                </div>
            </footer>
        </div>
    </div>
</div>