Question

我想要视口的独立性，页面占据整个屏幕高度，没有scrool吧。

页面必须占据100％的屏幕，是手机，平板电脑或台式机。 Withou scrool bar。

已了解？

HTML：

chrome.cookies.set({ url: url, name: "cookiename", value : "cookievalue", domain : "domain", path : "path" });

CSS：

<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>

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删除滚动条（因为溢出的内容被隐藏）

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

1 个答案: