我们正在一个团队中创建一个网站，然后触碰了页面问题右侧著名的白色空白。我们正在寻找其他可能的原因。
在首页中，
的右侧有一个空白的白色部分。但是，在带有chrome的Android或带有chrome的Ubuntu中，没有出现相同的问题。
我们在StackOverflow中尝试了以下建议，但是没有运气。
此外，我已经在开发工具中检查了每个布局，但它们似乎都没有超出宽度。
我们还尝试过在页脚后添加一个额外的div或更改位置：固定到页面顶部，但结果相同。
有人建议吗？
html, body, div, span, {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
input, button, textarea, select {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/*all-1.css*/
@charset "UTF-8";
html {
font-size: 62.5%;
}
body {
position: relative;
background-color: #fff;
color: #333;
font-size: 1.2rem;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
font-family:'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
.tyousei{}
.clearfix::after{
content: '';
display:block;
clear: both;
}
.btn img{
height:40%;
margin-top: 10px;
margin-left: 10px;
}
.btn .right-icon{
position: absolute;
top: 7px;
right: 10px;
}
.btn::before{
content: "";
position: absolute;
left:0%;
bottom:0px;
display: block;
width: 0%;
height: 2px;
background: #2F4D55;
transition: all .4s ease;
}
.btn:hover::before{
width: 100%;
}
#up-btn a{
position: fixed;
right:1%;
bottom:40%;
z-index: 5;
opacity: 0.8;
text-align: center;
height:50px;
width:50px;
padding-top: 8px;
border-radius: 25px;
background-color:#666;
}
#up-btn img{
display: inline-block;
width:65%;
height:75%;
}
.header{
width: 100%;
font-size: 0;
}
.global-navi{
height: 50px;}
.logo{
max-width: 250px;
width:40%;
min-width:200px;
float: left;
padding:20px 10px 10px 20px;
background-color: rgba(255,255,255,0.4)
}
.logo img{
display: block;
width: 100%;
height: auto;
}
.form-top{display: none;}
.sbox > *{
font-size: 1.2rem;
}
.form .sbtn{
width:34px;
height: 28px;
position: absolute;
left:517px;
top: 12px;
border:none;
font-size:20px;
outline: 0;
}
.suggestion{
border-bottom: solid 1px #666;
border-right: solid 1px #666;
border-left: solid 1px #666;
z-index:10;
}
.suggestion:hover{
background-color: rgba(240,240,240,1);
}
.word-suggestion{
width: 236px;
height: 30px;
font-size: 16px;
text-align: left;
padding: 7px 5px;
background-color: rgba(255,255,255,1);
color:#333;
}
.article-suggestion{
width: 350px;
height: 75px;
font-size:16px;
padding: 5px;
background-color: rgba(255,255,255,1);
}
.article-suggestion-title{
position: relative;
height:18px;
overflow:hidden;
font-weight:normal;
letter-spacing: 1px;
line-height:18px;
margin-bottom:12px;
text-decoration: underline;
color:#333;
}
.article-suggestion-desc{
position: relative;
height:30px;
overflow:hidden;
font-size:14px;
line-height: 16px;
color: #666;
padding-left:6px;
}
.article-suggestion-desc::after{
content: "";
position: absolute;
top:0px;
left:0px;
width:3px;
height:100%;
background-color: #74c0d5;
}
.article-number{
width: 350px;
height:30px;
background-color: rgba(255,255,255,0.7);
z-index:20;
font-size:14px;
color:#666;
text-align: center;
padding-top: 7px;
}
.result{
position: absolute;
top:41px;
left:282px;
z-index: 20;
}
#no-result{
width: 350px;
height:210px;
background-color: rgba(255,255,255,1);
border-bottom: solid 1px #666;
border-right: solid 1px #666;
border-left: solid 1px #666;
font-size:16px;
line-height:20px;
padding:10px;
z-index: 10;
}
#no-result .kobetuba-mail-link{
display: block;
width:80%;
height:60px;
text-align: center;
margin:10px auto 5px;
border: solid 1px #666;
padding: 2px;
cursor: pointer;
border-radius: 3px;
position: relative;
}
#no-result .kobetuba-mail-link img{
height:32px;
}
#no-result .kobetuba-mail-link p{
font-size: 16px;
color:#666;
}
#no-result .right-icon{
position: absolute;
top:15px;
right:5px;
color:#666;
}
#no-result .kobetuba-mail-link:hover{
background-color: rgba(230,230,230,0.6)
}
@media (min-width: 800px){
.form-top{
display: block;
position:relative;
}
}
.navi-box{
float:right;
}
.navi{
display: inline-block;
vertical-align: middle;
padding: 5px 2px;
}
@media (max-width:365px){
.article-and-toiro{
display: none;
}
}
@media (min-width:768px){
.article-and-toiro p
{font-size:16px;}
}
.message-box :hover{
opacity: 0.3;
}
.account :hover{
opacity: 0.7;
}
.article-and-toiro:hover {
background:rgba(255,255,255,0.2);
}
.navi-icon a{
position:relative
}
.navi-icon span{
display: inline-block;
top: -45px;
left: 30px;
width:20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255,255,255,0.8);
position:absolute;
color: #666;
text-align: center;
line-height: 20px;
vertical-align: middle;
font-size:16px;
}
.wrapper {
width: 96%;
min-width: 320px;
max-width: 1200px;
padding-bottom:50px;
margin: 10px auto 20px;
}
footer{
display: none;
}
@media (max-width:800px){
footer{
display: block;
}
footer{
box-shadow: 0px -3px 4px -2px rgba(0, 0, 0, 0.1);}
.footer-bottom {
width: 100%;
position: fixed;
bottom: 0;
height:44px;
border-top:double #2F4D55;
background-color: #fff;
padding-top: 5px;
/*background-color:#2F4D55;*/
}
.footer-bottom.close{
box-shadow: 0px -6px 8px -2px rgba(0, 0, 0, 0.3);}
.footer-bottom img{
height:70%;
display: block;
margin:0 auto;
}
.footer-open{
width:100%;
position: fixed;
bottom: 0;
background-color:#fff;
z-index: 10;
}
.footer-bottom.open{
border-top:solid 1px #696969
}
.category-list-bottom {
width:100%;
position: fixed;
top:0px;
bottom: 0px;
left:0px;
right:0px;
overflow-y: scroll;
height:100%;
text-align: center;
background-color:rgba(255,255,255,0.9);
box-shadow: 0px -6px 8px -2px rgba(0, 0, 0, 0.3);
}
}
.category-list-bottom{
}
.close-btn{
height:30px;
background-color: rgba(100,100,100,0.3)
}
.down-icon{
color: #666;
}
.category-list-bottom .form-bottom{
display: inline-block;
width: 100%;
padding-bottom:10px;
position: relative;
}
.category-list-bottom .form .sbtn{
position: absolute;
top:41px;
left:10px;
width:40px;
height:40px;
border-radius:20px;
background-color: transparent;
border:solid 2px #2F4D55;
color:#737575;
box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.3);
}
.category-list-bottom .form-bottom{
display: inline-block;
width: 100%;
}
.category-list-bottom .form .sbox{
position:absolute;
top:18px;
right:11%;
left:2%;
width:85%;
height:44px;
font-size: 16px;
border:solid 1px #535353;
}
.category-list-bottom .form .sbtn{
position: absolute;
top:20px;
right:2%;
left:88%;
border-radius: 50%;
}
.result-word-suggestion{
position: absolute;
top:64px;
right: 11%;
left: 3%;
width:85%;
z-index: 10;
}
.result-article-suggestion{
position: absolute;
top:64px;
right: 11%;
left: 2%;
width: 95%;
z-index: 10;
}
.form-bottom .word-suggestion{
width:100%;
height: 64px;
/* font-size: 16px; */
z-index: 100;
background-color: #f2fbfd;
}
.form-bottom .article-suggestion{
width: 100%;
z-index: 100;
text-align: left;
background-color: #f2fbfd;
border-left:solid 1px rgba(0,0,0,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
}
.form-bottom .article-number{
width:100%;
z-index: 100;
text-align: center;
background-color: #f2fbfd;
border-left:solid 1px rgba(0,0,0,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
}
.form-bottom .article-suggestion:hover,.form-bottom .article-number:hover{
background-color: rgba(255,255,255,1);
}
#form-bottom-no-result{
width:100%;
z-index: 100;
background-color: #f2fbfd;
border-left:solid 1px rgba(0,0,0,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
border-bottom:solid 1px rgba(0,0,0,0.3);
font-size: 16px;
padding: 10px;
line-height: 20px;
color: #666;
text-align: left;
}
#form-bottom-no-result .kobetuba-mail-link{
display: block;
width:95%;
margin:10px auto 5px;
height:70px;
padding: 3px;
border: solid 1px #666;
border-radius: 3px;
font-size:16px;
text-align: center;
position: relative;
cursor: pointer;
}
#form-bottom-no-result .kobetuba-mail-link img{
max-height:60%;
max-width:95%;
}
#form-bottom-no-result .kobetuba-mail-link .right-icon{
position: absolute;
top:50%;
right:10px;
color:#666;
}
#form-bottom-no-result .kobetuba-mail-link:hover{
background-color: rgba(230,230,230,0.4)
}
.category-list-bottom .category-list-wrapper{
padding:55px 7px 7px;
text-align: left;
min-height:370px;
height:90%;
}
.category-list-bottom .category-list{
margin-top:5px;
margin-bottom:5px;
position: relative;
height:35%;
border:solid 1px #acabab;
border-bottom:solid 2px #2F4D55;
background-color:rgba(255,255,255,0.5)
}
.category-list-bottom .category-list-img{
position:absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
padding-top:2px;
padding-bottom:2px;
}
.category-list-bottom .category-mini-list-wrapper li{
height:44px;
list-style: none;
margin:6px 10px 6px 10px;
padding:12px 7px;
background-color: rgba(200,200,200,0.5);
border-radius: 7px 22px 22px 7px;
zoom:0.8;
position: relative;
}
.category-list-bottom .article .category-mini-list-wrapper li{
display: inline-block;
width:47%;
margin-top:3px;
margin-bottom:3px;
margin-right: 0px;
}
.category-list-bottom .right-icon{
color:#666;
position: absolute;
top:50%;
right:5px;
transform:translateY(-50%);
}
.category-list-bottom .category-list.torio{
height:25%;
border-radius: 3px 22px 22px 3px;
text-align: center;
}
.category-list-bottom .category-list.torio img{
zoom:0.8;
}
.category-list-bottom .category-list.torio .new-icon{
margin-top:40px;
padding-left: 160px;
width:210px;
}
.category-list.all-close{
height:35%;
}
.category-list.close{
height:30%;
min-height:80px;
}
.category-list.close .category-mini-list-wrapper,.category-list.all-close .category-mini-list-wrapper{
display: none;
}
.category-list.open{
height:auto;
border:none;
}
.category-list.open .category-list-img{
display:block;
position:relative;
top:0;
left:0;
transform:none;
margin:5px auto;
}
.category-list.open .right-icon{
display:none;}
.category-list.open .category-mini-list-wrapper{
display:block}
@media (max-width:500px){
.category-list.close{height:44px}
}
@media (max-width:346px){
.category-list-bottom .article .category-mini-list-wrapper li{
display: inline-block;
width:45%;
}
.category-list-bottom .article .category-mini-list-wrapper img{
zoom:0.9;
}
}
@media(min-width:500px){
.category-list-bottom .kobetuba .category-mini-list-wrapper li{
display: inline-block;
width:46%;
margin-top:3px;
margin-bottom:3px;
}
.category-list-bottom .kobetuba .category-mini-list-wrapper img{
zoom:0.9;
}
}
/* hp_style-1.css */
@charset "UTF-8";
html {
font-size: 62.5%;
}
body {
background-color: #fff;
color: #333;
font-size: 1.2rem;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
color: #7C5119;
text-decoration: none;
}
font-family: 'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
.header{
width: 100%;
}
.main-visual{
height: 250px;
background-image: url(../img/main-visual-mini.jpg);
background-position: center center;
background-size: cover;
position: relative;
}
#vision{
padding:10px;
position: absolute;
top:40%;
right:2%;
width:45%;
min-width:270px;
max-width:450px;
z-index: 0;
}
@media(max-width:568px){
#vision{background-color: rgba(237,231,221,0.8)}
}
@media (min-width:500px){
.main-visual{
background-image: url(../img/main-visual.jpg);}
}
@media (min-width: 800px){
.main-visual{
height:450px;
background-image: url(../img/main-visual.jpg);
position: relative;
background-position: center;
}
#vision{
background-color: transparent;
}
}
@media (min-width: 1020px){
#vision{
top:30%;
width:55%;
left:55%;
}
}
.sbox{
border:solid 1px #535353;
background-color: rgba(255,255,255,0.3)
}
.form .sbtn{
color:#999;
/*ここから臨時対応*/
border-leftsolid 1px #737575;
}
.sbtn:hover{
color#151e76;
}
.suggestion{
border:none;
border-bottom: solid 1px #666;
}
.suggestion:hover{
opacity: 1;
background-color: rgba(255,255,255,0.9);
}
.word-suggestion{
background-color: rgba(255,255,255,0.4);
}
.article-suggestion{
background-color: rgba(255,255,255,0.7);
}
#no-result{
background-color: rgba(255,255,255,0.8)
}
.message-box :hover{
opacity: 0.6;
}
.account :hover{
opacity: 0.6;
}
.category-navi{
display: none;
}
/*タブレット縦以降*/
@media (min-width: 801px){
.category-mini-list{
list-style-type:none;
}
.category-navi{
display: block;
width: 100%;
height: 50px;
background-color: rgba(255,255,255,0.7);
position: absolute;
bottom: 0px;
border-bottom:double #022567;
font-size: 0;
padding-left:5%;
padding-right:5%;
text-align: center;
}
.category-list {
display: inline-block;
position: relative;
width: 30%;
top:0px;
min-width: 130px;
height: 50px;
vertical-align: middle;
padding-left: 16%;
padding-right: 16%;
}
.category-list-button{
position:absolute;
width: auto;
max-width: 280px;
top:0;
bottom: 0;
left: 0;
right:0;
margin: auto;
cursor: pointer;
}
.category-list-img {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%)translateY(-50%);
width: auto;
max-width: 100%;
height:auto;
margin: auto;
}
.category-list.toiro .category-list-img {
top: 50%;
}
.category-list:hover{
background:rgba(116,192,213,0.3);
}
.category-mini-list-wrapper{
display: none;
background-color: rgba(255,255,255,0.7);
position: absolute;
bottom:50px;
left:0;
width:100%;
height:192px;
opacity: 0.9;
text-align: center;
}
.category-mini-list{
width: 100%;
padding:10px 15px;
}
.category-list-mini-img {
width:auto;
max-width: 100%;
height:auto;
}
.category-mini-list:hover{
background: rgba(116,192,213,0.1);
}
.category-list.toiro .new-icon{
margin-top:15px;
padding-left: 55px;
width:100px;
height:40px;
}
}
.wrapper{
padding-top:20px;
}
section{
margin-top: 40px;
}
@media (min-width: 920px){
.wrapper{
width: 90%;
margin: 20px auto 40px;}
}
@media (max-width:800px){
.recomend,.new {
width:100%;
}
}
@media(min-width:800px){
.new{
width:
}
}
答案 0 :(得分：0)
也许您没有设置body / html的宽度和高度。
尝试一下：
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
我添加了
overflow-x: hidden
如果需要左右滚动，则应删除此行。