在Html标签/页脚
我在html标签之后或页脚下方获得了一个巨大的空白区域。白色空间只出现在桌面上的移动设备上，你可以看看它很好。这是链接：http://webapp.musayyab-naveed.com/main/
这是我的Html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" sizes="16x16" href="../plugins/images/favicon.png">
<title>RGES Web App</title>
<!-- Bootstrap Core CSS -->
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../plugins/bower_components/bootstrap-extension/css/bootstrap-extension.css" rel="stylesheet">
<!-- Menu CSS -->
<link href="../plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.css" rel="stylesheet">
<!-- toast CSS -->
<link href="../plugins/bower_components/toast-master/css/jquery.toast.css" rel="stylesheet">
<!-- morris CSS -->
<link href="../plugins/bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- animation CSS -->
<link href="css/animate.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- color CSS -->
<link href="css/colors/default-dark.css" id="theme" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-19175540-9', 'auto');
ga('send', 'pageview');
</script>
</head>
<?php
include 'php/header.php';
include 'php/left-sidebar.php'; include 'php/breadcrumbs.php';
?>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row bg-title">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
<h4 class="page-title">Dashboard</h4> </div>
<div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
<?php echo breadcrumbs(); ?>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- .row -->
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="white-box">
<h3 class="box-title">VERTRETUNGEN 11B</h3>
<ul class="list-inline two-part">
<li><i class="icon-folder text-purple"></i></li>
<li class="text-right"><span class="counter">169</span></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="white-box">
<h3 class="box-title">ALLE VERTRETUNGEN</h3>
<ul class="list-inline two-part">
<li><i class="icon-folder-alt text-danger"></i></li>
<li class="text-right"><span class="">311</span></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="white-box">
<h3 class="box-title">ANGEMELDETE SCHÜLER</h3>
<ul class="list-inline two-part">
<li><i class="icon-people text-info"></i></li>
<li class="text-right"><span class="counter">23</span></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="white-box">
<h3 class="box-title">NEW Invoices</h3>
<ul class="list-inline two-part">
<li><i class="ti-wallet text-success"></i></li>
<li class="text-right"><span class="">117</span></li>
</ul>
</div>
</div>
</div>
<!--/row -->
<!--.row -->
<div class="row">
<div class="col-md-12">
<div class="white-box">
<h3 class="box-title">Order Status</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Invoice</th>
<th>User</th>
<th>Order date</th>
<th>Amount</th>
<th class="text-center">Status</th>
<th class="text-center">Tracking Number</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="javascript:void(0)" class="btn-link"> Order #53431</a></td>
<td>Steve N. Horton</td>
<td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 22, 2014</span></td>
<td>$45.00</td>
<td class="text-center">
<div class="label label-table label-success">Paid</div>
</td>
<td class="text-center">-</td>
</tr>
<tr>
<td><a href="javascript:void(0)" class="btn-link"> Order #53432</a></td>
<td>Charles S Boyle</td>
<td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 24, 2014</span></td>
<td>$245.30</td>
<td class="text-center">
<div class="label label-table label-info">Shipped</div>
</td>
<td class="text-center"><i class="fa fa-plane"></i> CGX0089734531</td>
</tr>
<tr>
<td><a href="javascript:void(0)" class="btn-link"> Order #53433</a></td>
<td>Lucy Doe</td>
<td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 24, 2014</span></td>
<td>$38.00</td>
<td class="text-center">
<div class="label label-table label-info">Shipped</div>
</td>
<td class="text-center"><i class="fa fa-plane"></i> CGX0089934571</td>
</tr>
<tr>
<td><a href="javascript:void(0)" class="btn-link"> Order #53434</a></td>
<td>Teresa L. Doe</td>
<td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 15, 2014</span></td>
<td>$77.99</td>
<td class="text-center">
<div class="label label-table label-info">Shipped</div>
</td>
<td class="text-center"><i class="fa fa-plane"></i> CGX0089734574</td>
</tr>
<tr>
<td><a href="javascript:void(0)" class="btn-link"> Order #53435</a></td>
<td>Teresa L. Doe</td>
<td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 12, 2014</span></td>
<td>$18.00</td>
<td class="text-center">
<div class="label label-table label-success">Paid</div>
</td>
<td class="text-center">-</td>
</tr>
<tr>
<td><a href="javascript:void(0)" class="btn-link">Order #53437</a></td>
<td>Charles S Boyle</td>
<td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 17, 2014</span></td>
<td>$658.00</td>
<td class="text-center">
<div class="label label-table label-danger">Refunded</div>
</td>
<td class="text-center">-</td>
</tr>
<tr>
<td><a href="javascript:void(0)" class="btn-link">Order #536584</a></td>
<td>Scott S. Calabrese</td>
<td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 19, 2014</span></td>
<td>$45.58</td>
<td class="text-center">
<div class="label label-table label-warning">Unpaid</div>
</td>
<td class="text-center">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php include 'php/right-sidebar.php';?>
</div>
<!-- /.container-fluid -->
<?php include 'php/footer.php';?>
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../plugins/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bootstrap/dist/js/tether.min.js"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../plugins/bower_components/bootstrap-extension/js/bootstrap-extension.min.js"></script>
<!-- Menu Plugin JavaScript -->
<script src="../plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.js"></script>
<!--slimscroll JavaScript -->
<script src="js/jquery.slimscroll.js"></script>
<!--Wave Effects -->
<script src="js/waves.js"></script>
<!--Counter js -->
<script src="../plugins/bower_components/waypoints/lib/jquery.waypoints.js"></script>
<script src="../plugins/bower_components/counterup/jquery.counterup.min.js"></script>
<!--Morris JavaScript -->
<script src="../plugins/bower_components/raphael/raphael-min.js"></script>
<script src="../plugins/bower_components/morrisjs/morris.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/custom.min.js"></script>
<script src="js/dashboard1.js"></script>
<!-- Sparkline chart JavaScript -->
<script src="../plugins/bower_components/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/bower_components/jquery-sparkline/jquery.charts-sparkline.js"></script>
<script src="../plugins/bower_components/toast-master/js/jquery.toast.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.toast({
heading: 'Welcome to Elite admin'
, text: 'Use the predefined ones, or specify a custom position object.'
, position: 'top-right'
, loaderBg: '#ff6849'
, icon: 'info'
, hideAfter: 3500
, stack: 6
})
});
</script>
<!--Style Switcher -->
<script src="../plugins/bower_components/styleswitcher/jQuery.style.switcher.js"></script>
<!--Style Switcher -->
<script src="../plugins/bower_components/styleswitcher/jQuery.style.switcher.js"></script>
</body>
</html>
如何摆脱手机上的这个空白区域？任何帮助都会非常感激。
提前致谢：）
1 个答案:
答案 0 :(得分：-2)
尝试制作head-div后面的div的css
position: fixed;
top: 5%;
（根据顶部div的大小，根据需要调整％）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？