在小屏幕上移除页脚下方的空白区域
问题描述：
我设计网站尽可能快速响应。但不幸的是，White Space Below Footer仅在某些网页上出现在小屏幕上？
如何删除页脚下方的空白区域？
我尝试过的方法：
主页 [ ^ ]
上面链接到我工作的页面
I design the website to be responsive as possible.But unfortunately, White Space Below Footer appear on small screens only in some website page?
How to remove this White space below the footer?
What I have tried:
HomePage[^]
The above is link to the pages i work on
答
You could implement sticky footer on your page very easily which would force the footer to the bottom of the view port if the content is insufficient to fill the height.
1)Add a div around your entire page like wrapper
<body>
<div class="wrapper">
<header>
...
</footer>
</div> <!-- /wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
然后添加此CSS
then add this CSS
html,body {height:100%;}
body {margin:0;}
.wrapper {
display:table;
width:100%;
height:100%;
}
header,main,footer {display:table-row;}
header,footer {height:1px;}