Question

我正在为我的网站构建一个框架和一个网格，但每次页面扩展所以垂直滚动条出现时，垂直滚动条也会出现。我已经尝试了所有类型的东西溢出-y：自动或隐藏，但没有任何作用。是否与我使用所有这些大小的尺寸有关？这是小提琴 - http://jsfiddle.net/u11812br/

HTML

<header>
<img src="img/logo_big.png"/>
<button class="menu">
<a href="#menu">&#9776;</a>
</button>

<nav style="display:none;">
    <a href=""><p>HOME / GEDANE ZAKEN</p></a>
    <a href=""><p>CONTACT</p></a>
</nav>

</header>

<div class="spacer"></div>

<center>
<div class="gridcontainer">

<div class="section group">
<div class="col span_2_of_2">
<img src="img/img1.png"/>
</div>
</div>

<div class="section group">
<div class="col span_1_of_2">
<img src="img/img1.png"/>
</div>
<div class="col span_1_of_2">
<img src="img/img1.png"/>
</div>
</div>

<div class="section group">
<div class="col span_2_of_3">
<img src="img/img1.png"/>
</div>
</div>

<div class="section group">
<div class="col span_2_of_3">
<img src="img/img1.png"/>
</div>
</div>

<div class="section group">
<div class="col span_1_of_2">
<img src="img/img1.png"/>
</div>
<div class="col span_1_of_2">
<img src="img/img1.png"/>
</div>
</div>

<div class="section group">
<div class="col span_2_of_2">
<img src="img/img1.png"/>
</div>
</div>

</div>
</center>

CSS

body, html { 
height: 100%; 
margin: 0; 
padding: 0; 
border: none;
left: 0;
top: 0;
width: 100%;
}

body {
background: #f6cb4a; /* Old browsers */
background: -moz-linear-gradient(top, #ebe7e7 0%, #f3f2f2 100%); /* FF3.6+  */
background: -webkit-gradient(linear, left top, left bottom, color-  stop(0%,#ebe7e7), color-stop(100%,#f3f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /*   Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* Opera  11.10+ */
background: -ms-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* IE10+ */
background: linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe7e7', endColorstr='#f3f2f2',GradientType=0 ); /* IE6-9 */
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}

header {
width: 100vw;
height: 65px;
background: white;
position: fixed; 
z-index: 9999;
top: 0px;
}

header img {
width: 85px;
margin-left: 40px;
margin-top: 3px;
}

.spacer {
height: 80px;
width: 100vw;
}

button { 
position: absolute; 
right: 10vw; 
border: none; 
margin: 0; 
padding: 0; 
background: none; 
}

button a { 
font-size: 4em; 
text-decoration: none; 
color: grey; 
}

nav {
position: fixed;
top: 65px;
}

nav p {
width: 100vw;
padding: 25px 0px 25px 0px;
background: white;
margin: 0px;
border-top: 1px solid #ededed;
transition: 0.3s;
}

nav p:hover {
background: #ededed;
}

nav a {
text-align: center;
text-decoration: none;
color: #333;
}

.gridcontainer {
width: 95vw;
}

.section {
clear: both;
padding: 0px;
margin: 0px;
}

.col {
display: block;
float:left;
margin: 1% 0 1% 1.5%;
background: green;
}
.col:first-child { margin-left: 0; }

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.25%;
}

.span_2_of_3 {
width: 49.25%;
}

.span_1_of_2 img {
width: 47vw;
height: 65vw;
display: inline-block;
}

.span_2_of_2 img {
width: 95vw;
height: 60vw;
}


.span_2_of_3 img {
width: 95vw;
height: 30vw;
}


@media only screen and (max-width: 480px) {
.col { 
    margin: 1% 0 1% 0%;
}
}

@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}

Answer 1

当计算“vw”时，忽略右滚动条。

所以要么你可以使用〜“98vw”的最大宽度，或者只使用“overflow-x”：hidden。溢出-y是垂直轴;）

垂直滚动导致水平滚动

1 个答案: