如何将滚动条添加到小分辨率并将其删除大？

时间：2016-10-11 14:56:41

标签： html css css3

当向右滚动时，我在页面右侧会出现一个空白区域。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>
}

2 个答案:

答案 0 :(得分：0)

试一试：

＆＃13;
＆＃13; 
@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;
＆＃13;
＆＃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>

相关问题
最新问题