html - 如何让页眉占满整个屏幕 : Bootstrap

Question

我想让我的标题占据整个屏幕。我试过了

header {
    height: 100%
}

但这并没有改变任何事情。我可以让它工作，但只能通过更改像素数量来实现，当我转到另一台计算机时它就无法工作。

谢谢任何可以帮助我的人，如果您需要更多信息，请询问，我很乐意提供。

给你:HTML

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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 page-scroll" href="#page-top">Webfolio</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="page-scroll" href="#page-top">Home</a>
                </li>
                <li>
                    <a class="page-scroll" href="#accessibility">Accessiblity</a>
                </li>
                <li>
                    <a class="page-scroll" href="#usability">Usability</a>
                </li>
                <li>
                    <a class="page-scroll" href="#graphics">Graphics</a>
                </li>
                <li>
                    <a class="page-scroll" href="#javascript">JavaScript</a>
                </li>
                <li>
                    <a class="page-scroll" href="#tools">Tools</a>
                </li>
                <li>
                    <a class="page-scroll" href="#videos">Videos</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<!-- Header -->
<header>
    <div class="container">
        <div class="intro-text">
            <div class="intro-lead-in">My name is Ian Geer</div>
            <div class="email"><a href="mailto:iandavidgeer@gmail.com">iandavidgeer@gmail.com</a></div>
            <div class="intro-heading">Web Design:<a href="ingrahamhs.seattleschools.org">Ingraham</a> 2016</div>
            <a href="#units" class="page-scroll btn btn-xl">Main Content</a>
        </div>
    </div>
</header>

和:CSS

header {
    padding: 62px 63px;
    text-align: center;
    color: #fff;
    background-attachment: scroll;
    background-image: url(../img/seattle.jpg);
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

Answer 1

简单的解决方案:

header {
    height: 100vh;
}

这使用 viewport units .根据您支持的浏览器，这可能是您的最佳选择。 Browser support for viewport units

如果您需要支持 IE8 或更旧的移动浏览器，您可以改为这样做:

html, body {
    height: 100%;
}
header {
    height: inherit;
}