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。所以你需要改变它，并在body，html

上定义max-height:100vh;

   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' 1}}试试这个

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

它适合屏幕