我想用导航栏和以下容器构建页面。 容器应自动填充浏览器的其余高度。
至少在macOS Chrome和macOS Firefox中,以下代码可以满足我的要求。但是在macOS Safari,iOS Chrome,iOS Firefox和iOS Safari中,切换器无法正常工作。切换菜单时,Container不会向下移动(在iPhone SE上经过测试)。
html, body {
height: 100%;
}
.container, .navbar {
border-style: solid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="h-100 d-flex flex-column">
<nav class="navbar navbar-expand-sm navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>
<div class="container flex-fill">
text
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
当我从div中删除容器类时,一切都很好,但div不再是容器...
调整窗口大小(macOS Safari)时,菜单和容器将按预期显示。
请有人能告诉我我在做什么错吗?