当向右滚动时,我在页面右侧会出现一个空白区域。screen shot
我用过overflow-x:hidden;但它也限制了滚动条在较短的显示中出现。如果我使用overflow-x:hidden;对于较大的显示器,省略它们用于较短显示的代码(使用@ media);我还有空白。
这是代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header"></div>
<div id="picb"><ul id=b><button class="but1">KARATE</button><button class="but2">SILAMBATAM</button><button class="but3">KAALADI KUTHUVARISAI</button></ul></div>
<div id="home1"></div>
<div id="home2"><img id="shot_kara" src="src/ska-logo.png" ></img></div>
<div id="footer1"></div></body>
</body>
</html>
的CSS:
@media screen and (min-width: 500px) {
body
{
position:relative;
width:100vw;
overflow
background-color:#FFF;
margin:0 auto 0 auto;
}
div#picb {
top:30px;
vertical-align:top;
max-height:100%;
height:auto;
min-width:500px;
position:relative;
margin-left:0;
background-image:url(src/black-belt.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
-webkit-animation: fadein 2s;
animation: fadein 2s;
padding-top:40%;
overflow:hidden;
}
@keyframes fadein {
from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes fadein {
from{opacity:0}
to{opacity:1}
}
div#header {
max-height:100%;
height:auto;
opacity:0.96;
z-index:10000;
color: #CCC;
letter-spacing: 8px;
position: fixed;
left: 0%;
top: 0%;
background-color: #333;
padding-bottom: 3.5%;
padding-left:100%;
padding-right:100%
font-size: 20px;
overflow:hidden;
}
div#footer1 {
margin-top:60%;
max-height:100%;
height:auto;
padding-left:100%;
position:relative;
left:0;
background-color:#F60;
padding-top:260px;
padding-right:100%;
}
div#home1 {
vertical-align:top;
overflow-x:hidden;
padding-left:100%;
padding-bottom:40%;
position:relative;
background-color:#999;
}
#b {
position:absolute;
left:30%;
top:50%;
}
button.but1 {
margin:0 4px 0 0;
line-height:40px;
cursor:pointer;
font:"Lucida Console";
font-size:25px;
position:relative;
border-radius: 3px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: transparent;
color: White;
border: 2px solid #FFF;
}
button.but1:hover {
color: black;
background-color:#FFF;
}
button.but2 {
margin:0 4px 0 0;
line-height:40px;
cursor:pointer;
font:"Lucida Console";
-webkit-transition-duration: 0.4s;
font-size:25px;
position:relative;
border-radius: 3px;
transition-duration: 0.4s;
background-color: transparent;
color: White;
border: 2px solid #FFF;
}
button.but2:hover {
color: black;
background-color:#FFF;
}
button.but3 {
line-height:40px;
cursor:pointer;
font:"Lucida Console";
font-size:25px;
position:relative;
border-radius: 3px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: transparent;
color: White;
border: 2px solid #FFF;
}
but3:hover {
color: black;
background-color:#FFF;
}
#home2 {
overflow-x:hidden;
overflow-y:hidden;
left:0px;
position:relative;
margin-top:60%;
background-color:#C60;
padding-right:100%;
padding-bottom:40%;
}
#shot_kara {
position:relative;
left:310px;
top:210px;
}
</style>
}
答案 0 :(得分:0)
试一试:
@media screen and (min-width: 500px) {
body
{
position:relative;
width:100vw;
overflow
background-color:#FFF;
margin:0 auto 0 auto;
}
div#picb {
top:30px;
vertical-align:top;
max-height:100%;
height:auto;
min-width:500px;
position:relative;
margin-left:0;
background-image:url(src/black-belt.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
-webkit-animation: fadein 2s;
animation: fadein 2s;
padding-top:40%;
overflow:hidden;
}
@keyframes fadein {
from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes fadein {
from{opacity:0}
to{opacity:1}
}
div#header {
max-height:100%;
height:auto;
opacity:0.96;
z-index:10000;
color: #CCC;
letter-spacing: 8px;
position: fixed;
left: 0%;
right: 0;
top: 0%;
background-color: #333;
padding-bottom: 3.5%;
/* padding-left:100%;
padding-right:100% */
font-size: 20px;
overflow:hidden;
}
div#footer1 {
margin-top:60%;
max-height:100%;
height:auto;
/* padding-left:100%; */
position:relative;
left:0;
right: 0;
background-color:#F60;
padding-top:260px;
/* padding-right:100%; */
}
div#home1 {
vertical-align:top;
overflow-x:hidden;
padding-left:100%;
padding-bottom:40%;
position:relative;
background-color:#999;
}
#b {
position:absolute;
left:30%;
top:50%;
}
button.but1 {
margin:0 4px 0 0;
line-height:40px;
cursor:pointer;
font:"Lucida Console";
font-size:25px;
position:relative;
border-radius: 3px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: transparent;
color: White;
border: 2px solid #FFF;
}
button.but1:hover {
color: black;
background-color:#FFF;
}
button.but2 {
margin:0 4px 0 0;
line-height:40px;
cursor:pointer;
font:"Lucida Console";
-webkit-transition-duration: 0.4s;
font-size:25px;
position:relative;
border-radius: 3px;
transition-duration: 0.4s;
background-color: transparent;
color: White;
border: 2px solid #FFF;
}
button.but2:hover {
color: black;
background-color:#FFF;
}
button.but3 {
line-height:40px;
cursor:pointer;
font:"Lucida Console";
font-size:25px;
position:relative;
border-radius: 3px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: transparent;
color: White;
border: 2px solid #FFF;
}
but3:hover {
color: black;
background-color:#FFF;
}
#home2 {
overflow-x:hidden;
overflow-y:hidden;
left:0px;
position:relative;
margin-top:60%;
background-color:#C60;
padding-right:100%;
padding-bottom:40%;
}
#shot_kara {
position:relative;
left:310px;
top:210px;
}
&#13;
<div id="header"></div>
<div id="picb"><ul id=b><button class="but1">KARATE</button><button class="but2">SILAMBATAM</button><button class="but3">KAALADI KUTHUVARISAI</button></ul></div>
<div id="home1"></div>
<div id="home2"><img id="shot_kara" src="src/ska-logo.png" ></img></div>
<div id="footer1"></div></body>
&#13;
答案 1 :(得分:0)
只需移除您在100vw
上定义的body
宽度即可。这不是必要的,有些浏览器会为具有此值的侧边栏留出额外空间。
如果您这样做,“额外空间”就会消失,您的原始要求就没有实际意义。
@media screen and (min-width: 500px) {
body
{
position:relative; /* probably not required */
background-color:#FFF; /* not required but OK*/
margin:0; /* no need to center a 100% wide body */
}
div#picb {
top:30px;
vertical-align:top;
max-height:100%;
height:auto;
min-width:500px;
position:relative;
margin-left:0;
background-image:url(src/black-belt.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
-webkit-animation: fadein 2s;
animation: fadein 2s;
padding-top:40%;
overflow:hidden;
}
@keyframes fadein {
from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes fadein {
from{opacity:0}
to{opacity:1}
}
div#header {
max-height:100%;
height:auto;
opacity:0.96;
z-index:10000;
color: #CCC;
letter-spacing: 8px;
position: fixed;
left: 0%;
right: 0;
top: 0%;
background-color: #333;
padding-bottom: 3.5%;
/* padding-left:100%;
padding-right:100% */
font-size: 20px;
overflow:hidden;
}
div#footer1 {
margin-top:60%;
max-height:100%;
height:auto;
/* padding-left:100%; */
position:relative;
left:0;
right: 0;
background-color:#F60;
padding-top:260px;
/* padding-right:100%; */
}
div#home1 {
vertical-align:top;
overflow-x:hidden;
padding-left:100%;
padding-bottom:40%;
position:relative;
background-color:#999;
}
#b {
position:absolute;
left:30%;
top:50%;
}
button.but1 {
margin:0 4px 0 0;
line-height:40px;
cursor:pointer;
font:"Lucida Console";
font-size:25px;
position:relative;
border-radius: 3px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: transparent;
color: White;
border: 2px solid #FFF;
}
button.but1:hover {
color: black;
background-color:#FFF;
}
button.but2 {
margin:0 4px 0 0;
line-height:40px;
cursor:pointer;
font:"Lucida Console";
-webkit-transition-duration: 0.4s;
font-size:25px;
position:relative;
border-radius: 3px;
transition-duration: 0.4s;
background-color: transparent;
color: White;
border: 2px solid #FFF;
}
button.but2:hover {
color: black;
background-color:#FFF;
}
button.but3 {
line-height:40px;
cursor:pointer;
font:"Lucida Console";
font-size:25px;
position:relative;
border-radius: 3px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: transparent;
color: White;
border: 2px solid #FFF;
}
but3:hover {
color: black;
background-color:#FFF;
}
#home2 {
overflow-x:hidden;
overflow-y:hidden;
left:0px;
position:relative;
margin-top:60%;
background-color:#C60;
padding-right:100%;
padding-bottom:40%;
}
#shot_kara {
position:relative;
left:310px;
top:210px;
}
<div id="header"></div>
<div id="picb"><ul id=b><button class="but1">KARATE</button><button class="but2">SILAMBATAM</button><button class="but3">KAALADI KUTHUVARISAI</button></ul></div>
<div id="home1"></div>
<div id="home2"><img id="shot_kara" src="src/ska-logo.png" ></img></div>
<div id="footer1"></div></body>