css - 如何让页面占据整个屏幕高度？

Question

我想要独立于视口(viewport)，页面占据整个屏幕高度，没有滚动条。

该页面必须占据 100% 的屏幕是手机、平板电脑或台式机。没有滚动条。

明白了吗？

HTML:

<nav class="navbar navbar-default navbar-fixed-top">        <!-- "navbar-fixed-top" barra fixa no topo -->
    <div class="container-fluid">
        <div class="navbar-header">  <!-- MENU RESPONSIVO -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#barra">  
                <!--- Barra responsiva -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a href="#" class="navbar-brand"> Menu </a>

        </div>


            <div class="collapse navbar-collapse" id="barra"> <!-- exibição de conteúdo do menu em qualquer tamanho/resolução -->
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>               

                <form action="" class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Pesquisar"></input>
                    </div>

                    <button type="submit" class="btn btn-default"> Buscar </button>
                </form>
        </div>
    </div>
</nav>
<br>

<div class="container-fluid">
<div class="row">
<section>
    <img class="col-md-4" src="img/071.JPG">
</section>  
</div>
</div>

<footer> </footer>

CSS:

*{
  margin: 0;
    padding: 0;
}

body {

    height: 100%;
}

Answer 1

使用以下 CSS:

html, body {
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
}

这会将 width 和 height 设置为 100%，并将 max-width 和 max-width 到 100%(以阻止宽度和高度超过 100%)

然后它有 overflow: hidden 来移除滚动条(因为溢出的内容被隐藏了)