为什么手机端看不到完整页面但旋转后可以看到
我用bootstrap,html,css做了一个页面，
在手机端显示时，页面显示不完整，
用鼠标滑动页面无法拉到最底部，
用笔记本的触控向下拉时：拉的一瞬间能看到底部，之后又看不到了。
这个是为什么呢？有什么解决办法吗？
页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery1.42.min.js"></script><script type="text/javascript" src="../js/jquery.SuperSlide.2.1.1.js"></script>
<link rel="stylesheet" href="../css/dashboard.css" type="text/css" media="screen" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="btn-group navbar-right" id="mobile_menu">
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default btn-lg" data-target="#"
href="javascript:;">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
<ul class="dropdown-menu menu-top">
<li><a href="#">首页</a></li>
<li class="divider"></li>
</ul>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/首页/自然.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/首页/自然.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
</div>
<div class="picScroll-left">
<div class="bd">
<ul class="picList">
<li>
<div class="pic">
<div class="thumbnail">
<div class="caption">
<h4>2016/10/30</h4><hr>
<h3>豪华导师团的三小时</h3>
<p>第六届公益伙伴日即将拉开帷幕,此次公益货盘日,ABC将携手哈公益使出"洪荒之力"共同为大家带来...</p>
<p><img alt="..." src="../img/首页/中.png" class="img-scoll"></p>
<p><a href="#" class="btn btn-default" role="button">查看详情</a></p>
</div>
</div>
</div>
</li>
<li>
<div class="pic">
<div class="thumbnail">
<div class="caption">
<h4>2016/10/30</h4><hr>
<h3>豪华导师团的三小时</h3>
<p>即将拉开帷幕使出"洪荒之力"共同为大家带来...</p>
<p><img alt="..." src="../img/首页/中.png" class="img-scoll"></p>
<p><a href="#" class="btn btn-default" role="button">查看详情</a></p>
</div>
</div>
</div>
</li>
<li>
<div class="pic">
<div class="thumbnail">
<div class="caption">
<h4>2016/10/30</h4><hr>
<h3>豪华导师团的三小时</h3>
<p>第六届公益伙伴日即将拉开帷幕,此次公益货盘日,ABC将携手哈公益使出"洪荒之力"共同为大家带来...</p>
<p><img alt="..." src="../img/首页/中.png" class="img-scoll"></p>
<p><a href="#" class="btn btn-default" role="button">查看详情</a></p>
</div>
</div>
</div>
</li>
<li>
<div class="pic">
<div class="thumbnail">
<div class="caption">
<h4>2016/10/30</h4><hr>
<h3>豪华导师团的三小时</h3>
<p>即将拉开帷幕,使出"洪荒之力"共同为大家带来...</p>
<p><img alt="..." src="../img/首页/中.png" class="img-scoll"></p>
<p><a href="#" class="btn btn-default" role="button">查看详情</a></p>
</div>
</div>
</div>
</li>
<li>
<div class="pic">
<div class="thumbnail">
<div class="caption">
<h4>2016/10/30</h4><hr>
<h3>豪华导师团的三小时</h3>
<p>即将拉开帷幕使出"洪荒之力"共同为大家带来...</p>
<p><img alt="..." src="../img/首页/中.png" class="img-scoll"></p>
<p><a href="#" class="btn btn-default" role="button">查看详情</a></p>
</div>
</div>
</div>
</li>
<li>
<div class="pic">
<div class="thumbnail">
<div class="caption">
<h4>2016/10/30</h4><hr>
<h3>豪华导师团的三小时</h3>
<p>即将拉开帷幕使出"洪荒之力"共同为大家带来...</p>
<p><img alt="..." src="../img/首页/中.png" class="img-scoll"></p>
<p><a href="#" class="btn btn-default" role="button">查看详情</a></p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="fd">
<a class="left carousel-control prev" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control next" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="message-open" >
<h3 class="text-center">信息公开</h3>
</div>
<div class="row col-sm-offset-2">
<div class="col-sm-3">
<div class="media">
<a class="media-left media-middle" href="#">
<img alt="图标" src="../img/首页/信息公开1.png">
</a>
</div>
</div>
<div class="col-sm-3">
<div class="media">
<a class="media-left media-middle" href="#">
<img alt="图标" src="../img/首页/信息公开2.png">
</a>
<div class="text-center t-top-bottom">
<p><button type="button" class="btn btn-primary center">查看更多</button></p>
</div>
<div class="text-center">
<img alt="二维码" src="../img/首页/二维码.png" width="300rem" height="300rem">
<p> -- 请扫描关注微信公众号 -- </p>
</div>
<div class="message-open">
<h3 class="text-center">课程菜单</h3>
</div>
<div class="text-center t-top-bottom">
<p><button type="button" class="btn btn-primary center">查看更多</button></p>
</div>
<nav class="navbar-default navbar-static-bottom" role="navigation">
<div class="container">
<div class="row">
<br>
<div class="col-sm-3">
<p>电话</p>
<p>1234567890</p>
</div>
<div class="col-sm-3">
<p>E-mail</p>
<p>11@11.com</p>
</div>
<div class="col-sm-3">
<p>联系我们</p>
<p>
<img alt="新浪图标" src="../img/首页/新浪.png" class="img-s">
<img alt="微信图标" src="../img/首页/微信.png" class="img-s">
<img alt="FaceBook图标" src="../img/首页/鸟.png" class="img-s">
</p>
</div>
<div class="col-sm-3">
<p>地址</p>
<p>地球村</p>
</div>
</div>
</div>
<p class="col-sm-offset-1">Copyright@2016.2016.Company nmae All rignts reserved.</p>
<br>
</nav>
<script type="text/javascript">
jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:3,trigger:"click"});
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你给container这个div加上三个属性：width:100%;height:100%;overflow:auto;试试吧
评论无法截图，所以我吧效果图截取到这里：
（这是对nav元素的改动效果）
（这是对.container的改动后的效果，注意到滚动条了吗？）
因为你的第一个nav没有结束标签。