html页面不适合屏幕

Question

我正在尝试使页面靠在屏幕上，但是我发现总是出现滚动条，我正在使用vh和vw进行尝试，因此它始终显示没有滚动条的页面。我认为问题是某种填充类型，但我不确定，如何确定页面大小与屏幕大小相同？

   body {    
        margin: 0;
    }
    
    #container {    
        width: 100vw;
        height: 100vh;
    }
    
    header {    
        height: 25vh;
        width: 100vw;
        background-color: #CCC;
        text-align: center;        
    }
    
    header img {    
        height: 20vh;
        width: : 50vw;
    }
        
    aside {    
        width: 20vw;
        height:  80vh;
        background-color: #0C0;
        float: right;    
    }
    
    aside ul {    
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    aside li {    
        margin: 0;
        padding: 0;
    }
    
    aside li a {    
        display: block;
        color: white;
        text-align: center;
        text-decoration: none;
        height: 5vh;
    }
    
    aside li a:hover {    
        background-color: #CCC;
    }
    
    main {    
        width: 80vw;
        height: 80vh;
        background-color: #03C;
        margin: 0;
        padding: 0;
    }
    
    footer {    
        height: 5vh;
        width: 100vw;
        background-color: #CCC;
        clear: both;
        margin: 0;
        padding: 0;
    }
    
    /*Menu*/
    nav {
        width: 100vw;
        height: 5vh;
        background-color: #666;
        margin: 0;
        padding: 0;
    }
    
    nav ul {    
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    nav li {    
        float: left;
        margin: 0;
        padding: 0;    
    }
    
    nav li a {
        height: 3vh;
        display: block;
        color: white;
        text-align: center;
        text-decoration: none;
        padding: 1vh 8vw;
    }
    
    nav li a:hover {    
        background-color: #CCC;
    }

    
    		<div id="container">
    		<header><img src="imatges/Gwlogo.png" alt="Mountain View"</header>
    		<nav>
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Calendari</a></li>
    				<li><a href="#">Formulari</a></li>
    				<li><a href="#">Iframe</a></li>
    			</ul>
    		</nav>
    
    		<aside>
    
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Calendari</a></li>
    				<li><a href="#">Formulari</a></li>
    				<li><a href="#">Iframe</a></li>
    			</ul>
    			
    		</aside>
    		<main></main>
    		<footer></footer>
    		</div>

Answer 1

所有元素的净高度都大于100vh。因此您需要更改它，并在正文上定义max-height:100vh;，html

   body {    
        margin: 0;
     height:100vh;
     width:100%;
     max-width:100vh;
    }
    
    #container {    
        width: 100vw;
        height: 100vh;
    }
    
    header {    
        height: 20vh;
        width: 100vw;
      margin:0;
      padding:0;
        background-color: #CCC;
        text-align: center;        
    }
    
    header img {    
        height: 20vh;
        //width: 50vw;
      margin:0 auto;
      padding:0;
      display:block;
    }
        
    aside {    
        width: 20vw;
        height:  70vh;
      
        background-color: #0C0;
        float: right;    
    }
    
    aside ul {    
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    aside li {    
        margin: 0;
        padding: 0;
    }
    
    aside li a {    
        display: block;
        color: white;
        text-align: center;
        text-decoration: none;
        height: 5vh;
    }
    
    aside li a:hover {    
        background-color: #CCC;
    }
    
    main {    
        width: 80vw;
        height: 70vh;
        background-color: #03C;
        margin: 0;
        padding: 0;
    }
    
    footer {    
        height: 5vh;
        width: 100vw;
        background-color: #CCC;
        clear: both;
        margin: 0;
        padding: 0;
    }
    
    /*Menu*/
    nav {
        width: 100vw;
        height: 5vh;
        background-color: #666;
        margin: 0;
        padding: 0;
    }
    
    nav ul {    
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    nav li {    
        float: left;
        margin: 0;
        padding: 0;    
    }
    
    nav li a {
        height: 3vh;
        display: block;
        color: white;
        text-align: center;
        text-decoration: none;
        padding: 1vh 8vw;
    }
    
    nav li a:hover {    
        background-color: #CCC;
    }

    		<div id="container">
    		<header><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" alt="Mountain View"</header>
    		<nav>
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Calendari</a></li>
    				<li><a href="#">Formulari</a></li>
    				<li><a href="#">Iframe</a></li>
    			</ul>
    		</nav>
    
    		<aside>
    
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Calendari</a></li>
    				<li><a href="#">Formulari</a></li>
    				<li><a href="#">Iframe</a></li>
    			</ul>
    			
    		</aside>
    		<main></main>
    		<footer></footer>
    		</div>

Answer 2

如果您想使主滚动条消失，请在overflow: hidden;或body标签中添加css属性html。

如何确定页面大小与屏幕大小相同？

如果您的页面是body或html，请将填充，边框和边距设置为0，只是为了确保它适合屏幕大小，但是如果您的页面是div和id='container'，请尝试此操作

#container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

适合屏幕