我为什么要横向滚动？

时间：2017-05-19 06:23:08

标签： html css

所以这是我的HTML代码 - 

    /**
	font-family: 'Montserrat Subrayada', sans-serif;
	font-family: 'Josefin Sans', sans-serif;
	font-family: 'Alex Brush', cursive;
	font-family: 'Six Caps', sans-serif;
**/

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100vw;
	background-color: #fff;
	font-size: 100%;
}

#main {
	margin: 0;
	padding: 0;
	position: relative;
	height: 100vh;
	width: 100%;
	background-image: url('../assets/images/bgpattern.png');
}

#vidbox {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: -1;
}

#bgvid{
	width: 100%;
}

#vidfallback{
	width: 100%;
}

#navbar {
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #fff;
}

#navbar li {
	float: right;
}

#navbar li a {
	display: block;
	color: rgb(35,85,125);
	font-family: 'Josefin Sans', sans-serif;
	text-decoration: none;
	font-size: 28px;
	text-align: center;
	padding: 35px 40px;
}

#navbar li a:hover{
	color: #666;
	-webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    -moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}

#navbar li a:active{
	-webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    -moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}

#logo {
	height: 80px;
	margin: 10px;
}

.left {
	float: left!important;
	background-color: rgb(35,85,125);
}

.white{
	color: #fff!important;
}

#tagline{
	font-size: 50px;
	font-family: 'Alex Brush', cursive;
	margin: 130px;
	color: #fff;
}

.bigger{
	font-size: 80px;
}

.box{
	width: 100%;
	height: 200px;
}
<!DOCTYPE html>
    <html>
    <head>
    	<title>Testing</title>
    	<link rel="stylesheet" type="text/css" href="css/home.css">
    	<link href="https://fonts.googleapis.com/css?family=Alex+Brush|Josefin+Sans|Montserrat+Subrayada|Six+Caps" rel="stylesheet">
    	<!--<script src="assets/js/jquery-1.12.3.js" type="text/javascript"></script>-->
    </head>
    <body>
    	<div id="main">
    		<div id="vidbox">
    			<video autoplay  poster="" id="bgvid" loop>
    				<source src="assets/video/filxe.mp4" type="video/mp4">
    				<img src="assets/images/vidfallback.png" id="vidfallback">
    			</video>
    		</div>
    		<ul id="navbar">
    			<li class="left"><img src="assets/images/logomini.png" id="logo"></li>
    			<li class="left"><a href="" class="white">HK Construction Company</a></li>
    			<li><a href="#home" id="home">Home</a></li>
    			<li><a href="#">Services</a></li>
    			<li><a href="#">About Us</a></li>
    		</ul>
    		<h1 id="tagline"><span class="bigger">"</span> You Dream, We Build <span class="bigger">"</span></h1>
    	</div>
    	<div class="box about">
    		
    	</div>
    </body>
    </html>

我不明白为什么我在浏览器中获得水平滚动条。我尝试了所有的东西，比如给他们所有0填充＆am​​p; 0保证金，似乎没有任何工作，所以你们任何人都可以看出罪魁祸首。

1 个答案:

答案 0 :(得分：2)

vw单位根据视口的宽度确定其大小。但是，浏览器会将视口大小计算为浏览器窗口，其中包含滚动条的空间。

如果将元素设置为100vw，则元素将扩展到html和body元素之外，这会导致水平滚动。

所以：

更改 

body {

    width:100vw;

}

收件人： 

body {

    width:100%;

}

完整代码： 

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    background-color: #fff;
    font-size: 100%;
}

#main {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100vh;
    width: 100%;
    background-image: url('../assets/images/bgpattern.png');
}

#vidbox {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

#bgvid{
    width: 100%;
}

#vidfallback{
    width: 100%;
}

#navbar {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
}

#navbar li {
    float: right;
}

#navbar li a {
    display: block;
    color: rgb(35,85,125);
    font-family: 'Josefin Sans', sans-serif;
    text-decoration: none;
    font-size: 28px;
    text-align: center;
    padding: 35px 40px;
}

#navbar li a:hover{
    color: #666;
    -webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    -moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}

#navbar li a:active{
    -webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    -moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}

#logo {
    height: 80px;
    margin: 10px;
}

.left {
    float: left!important;
    background-color: rgb(35,85,125);
}

.white{
    color: #fff!important;
}

#tagline{
    font-size: 50px;
    font-family: 'Alex Brush', cursive;
    margin: 130px;
    color: #fff;
}

.bigger{
    font-size: 80px;
}

.box{
    width: 100%;
    height: 200px;
}
<!DOCTYPE html>
    <html>
    <head>
    	<title>Testing</title>
    	<link rel="stylesheet" type="text/css" href="css/home.css">
    	<link href="https://fonts.googleapis.com/css?family=Alex+Brush|Josefin+Sans|Montserrat+Subrayada|Six+Caps" rel="stylesheet">
    	<!--<script src="assets/js/jquery-1.12.3.js" type="text/javascript"></script>-->
    </head>
    <body>
    	<div id="main">
    		<div id="vidbox">
    			<video autoplay  poster="" id="bgvid" loop>
    				<source src="assets/video/filxe.mp4" type="video/mp4">
    				<img src="assets/images/vidfallback.png" id="vidfallback">
    			</video>
    		</div>
    		<ul id="navbar">
    			<li class="left"><img src="assets/images/logomini.png" id="logo"></li>
    			<li class="left"><a href="" class="white">HK Construction Company</a></li>
    			<li><a href="#home" id="home">Home</a></li>
    			<li><a href="#">Services</a></li>
    			<li><a href="#">About Us</a></li>
    		</ul>
    		<h1 id="tagline"><span class="bigger">"</span> You Dream, We Build <span class="bigger">"</span></h1>
    	</div>
    	<div class="box about">
    		
    	</div>
    </body>
    </html>

相关问题
最新问题