如何将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 dev工具模拟）。 第二，导航栏的高度缩小。

jsfiddle 在这里可用。 您也可以将其与原始版本进行比较。 在网址末尾添加/embedded/result/将全屏打开结果。 感谢您的帮助！

Answer 1

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

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

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

请注意，标记中</nav>之后的<br>无效，因此我将其删除。 如果您要在此处留出空隙，请使用边距的填充

更新的小提琴

堆栈片段

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