Question

我正在尝试将导航和jumbotron div结合起来，以便两者都可以包含整个页面（100vh），而不是更进一步。基本上，我想要导航和jumbotron，但我希望元素填充整个页面，而不是它可滚动。

目前，导航具有固定的高度，jumbotron也是如此。看看这里（https://jsfiddle.net/orna9gz8/），虽然JSFiddle没有足够大的屏幕可以看到一切都超出了页面。我试过的一些事情，但没有奏效：

我尝试删除导航和jumbotron之间的默认Bootstrap边距，但是jumbotron仍然超出了页面。
我尝试将margin-top设置为-10%，这暂时解决了问题（现在一切都适合一页），但这似乎不适用于较小的设备。这可能不是适合移动设备/响应的解决方案。

HTML：

<header>
    <!-- Navigation -->
    <nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"></a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <!-- Nav links -->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="teams.html">Teams</a></li>
                    <li><a href="involved.html">Get Involved</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<div class="jumbotron vertical-center">
    <div class="container text-center" id="landing">
        <h1>Website</h1><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu placerat eros, sed interdum lectus.</p>
        <button type="button" class="btn btn-default">Learn More</button>
    </div>
</div>

CSS：

.navbar {
    margin-bottom: 0;
}

.jumbotron {
    background: none;
}

.navbar-default {
    background-color: transparent !important;
    border-color: transparent;
    background-image: none;
    box-shadow: none;
}

Answer 1

您可以修改导航栏，移除.jumbotron边距并将其设为min-height:100vh

https://jsfiddle.net/rf4Lj4y9/

.navbar-default {
    background-color: transparent !important;
    border-color: transparent;
    background-image: none;
    box-shadow: none;
}

.navbar {
    margin-bottom: 0;
}

.jumbotron {
    background: none;
    min-height: 100vh;
    margin-bottom: 0;
}

PS - 你的小提琴在JavaScript编辑器中有CSS。

结合导航和jumbotron

1 个答案: