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可用here。您还可以将其与the original version进行比较。将/embedded/result/添加到网址的末尾将以全屏模式打开结果。谢谢你的帮助！

Answer 1

如果您更改以下内容，它将按照您的要求运行：

更改为min-height: 100vh规则

.full-height

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

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

Updated fiddle

Stack snippet

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

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

1 个答案: