如何制作一个占据整个屏幕高度的页面？答案

【问题标题】：How to make a page that occupies the entire screen height?如何制作一个占据整个屏幕高度的页面？
【发布时间】：2015-12-03 19:14:29
【问题描述】：

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

页面必须占据 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%;
}

【问题讨论】：

html, body { height: 100%; width: 100%; max-width: 100%; max-height: 100%; overflow: hidden; }
how to make a full screen div, and prevent size to be changed by content?的可能重复
可以在jsfiddle里加代码吗？
非常感谢！补充您的评论：maujor.com/tutorial/rodape-embaixo-da-janela.php

标签： css

【解决方案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来移除滚动条（因为溢出的内容被隐藏了）

【讨论】：