我在所有浏览器中工作正常，但铬浏览器/ android默认浏览器有问题 我想要做的是 1：标题仍然在顶部 2：没有页面滚动，只有内部滚动，我的页面是3列布局
我在移动浏览器中遇到的问题 即使我已将内容设置为适合设备/浏览器高度
，窗口滚动也会出现html代码：
<html>
<head>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, maximum-scale=1,user-scalable=no"/>
</head>
<body unselectable="on">
<center>
<header>
<a id="logo" href="#"> Header</a>
<ul class="primary_nav">
<li class="selected"><a style="color:#fff"><span class="icon about"></span>Rings & Pendants</a></li>
<li><a href="index2.html"><span class="icon folio"></span>Earrings & Cufflinks</a></li>
</ul>
</header>
<center style="height:calc(100% - 110px);padding-top:110px;">
<div id="container">
<div id="section-navigation">
<ul>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
</ul>
</div>
<div id="content">
<table border="1" width="100%" height="100%">
<tr height="50%">
<td>
<table border="1" width="100%" height="100%">
<tr height="calc(100% - 40px)"><td></td></tr>
<tr height="20px"><td></td></tr>
</table>
</td>
</tr>
<tr height="50%">
<td>
<table border="1" width="100%" height="100%">
<tr height="calc(100% - 40px)"><td></td></tr>
<tr height="20px"><td></td></tr>
</table>
</td>
</tr>
</table>
</div>
<div id="aside">
<ul>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
<li><img src="https://pbs.twimg.com/profile_images/500945788533342208/BnSNf5X4_400x400.png" width="100%" alt="top" id="101"></li>
</ul>
</div>
</div>
</center>
</center>
</body>
</html>
css代码：
/************** main patch starts **************/
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,tt,ul,var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
text-decoration: none;
}
a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}
/************** main patch ends **************/
#container
{
margin: 0 auto;
width: 100%;max-width:800px;
background: #fff;
}
#content
{
overflow:scroll;height:100%;
float: left;
width: 60%;
}
#aside
{
overflow:scroll;height:100%;
float: right;
width: 20%;
display: inline;
}
#section-navigation
{
overflow:scroll;height:100%;
float: left;
width: 20%;
display: inline;
}
#section-navigation ul,#aside ul
{
margin: 0;
padding: 0;
}
#section-navigation ul li,#aside ul li
{
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
/******header and tabs starts*******/
header{
color:#fff;
background-color:#EE1EC6;
position:fixed;
z-index:10;
width:100%;
top:0px;
}
header a#logo{
margin:5px auto;
font-size:31px;text-decoration:none;
display:block;
}
ul.primary_nav{
border-radius:3px;
}
ul.primary_nav li{
background-color:#26292E;
border-bottom:6px solid #26292E;
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
float:left;
}
ul.primary_nav li.selected{
background-color:#000;
border-bottom:6px solid #EE1EC6;
}
ul.primary_nav li a{
display:block;
height:36px;
text-align:center;
color:#c5c5c5;
font-size:13px;
text-shadow:0px 1px 0px #2a2a2a;
text-decoration:none;
font-weight:bold;
}
ul.primary_nav li a span.icon{
display:block;
margin:auto;
width:22px;
height:22px;
}
ul.primary_nav li a span.about{
background:url(../images/about.png) no-repeat top center;
}
ul.primary_nav li a span.folio{
background:url(../images/folio.png) no-repeat top center;
}
/******header and tabs ends*******/
答案 0 :(得分：2)
本质上，它是“溢出：滚动;”导致这种情况的属性 - 在几个css选择器中很明显。并非所有设备或操作系统上的所有浏览器都会呈现带有“隐藏”滚动条的可滚动区域;隐藏，直到有人与元素交互。尝试删除它并为JS滚动条添加JS库。我并不特别喜欢这个，但我已经取得了一些成功：http://manos.malihu.gr/jquery-custom-content-scroller这里是他们的演示页面：http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
答案 1 :(得分：0)
我没有完全解决问题所在，但尝试溢出：可见;用于移动屏幕尺寸。