HTML页面不适合屏幕

时间:2016-12-24 13:43:03

标签: html css size

我正在尝试将我的页面放到屏幕上,但我发现滚动条总是出现,我正在使用vhvw来尝试制作它,因此它始终显示没有滚动条的页面。我认为问题是某种类型的填充,但我不确定,我怎样才能确保页面的大小与屏幕一样?

   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>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

如果您希望主滚动条消失,请在overflow: hidden;body标记中添加css属性html

  

如何确保页面大小与屏幕相同?

如果您的意思是页面是body或html,请将填充,边框和边距设置为0,以确保它适合屏幕大小,但如果您的意思是页面为div id='container' 1}}试试这个

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

它适合屏幕