[英]White space on bottom of Firefox and Chrome pages
幾天前，我問過有關在更改FF和Chrome瀏覽器窗口大小時刪除頁面右側出現的空白的問題。 我得到了非常迅速的幫助，並解決了該問題（這是帖子： 在Firefox和Chrome中最小化瀏覽器窗口會在頁面右側添加空白 ）。
但是相同的技巧似乎不適用於底部的空白。 另外，無論窗口大小如何，高度始終是相同的，所以我認為它是padding或margin ，但似乎不是，因為對頁面底部有任何影響的所有元素都有padding和margin設置為0。
有任何想法嗎？ 下面的相關HTML和CSS。
html { margin:0; padding:0; height:100%; width:100%; position:relative; } body { margin:0; padding:0; height:100%; width:100%; position:absolute; bottom:0; top:0; left:0; right:0; } p { margin:0; padding:0; color:#1C1C1C; } img { margin:0; padding:0; } .maincontainer { position:relative; padding:0; margin:0; } .container { width:100%; min-height:100%; position:relative; margin:0; padding:0; } .container:after { content:""; display:block; } .logo { float:left; margin-left:20px; font-family:'Advent Pro', sans-serif; font-weight:100; color:#1C1C1C; } @media screen and (min-width:768px) { .logo { float:left; margin-left:5px; font-family:'Advent Pro', sans-serif; font-weight:100; color:#1C1C1C; } } .name { float:left; margin:5px 10px 0px 10px; font-size:37px; } .type { float:left; width:50px; margin-top:6px; padding:1px 0px 1px 10px; font-size:15px; border-left:1px solid #1C1C1C; } .nav { float:right; margin:0; padding:0; list-style:none; width:300px; } @media screen and (min-width:500px) { .nav { float:right; margin:0; padding:0; list-style:none; width:444px; } } .nav li { float:left; padding:16px 10px 13px 10px; font-family:'Advent Pro', sans-serif; font-weight:200; font-size:17px; color:#1C1C1C; } .nav li:hover { border-bottom:2px solid #1C1C1C; } @media screen and (min-width:500px) { .nav li { float:left; padding:16px 25px 13px 25px; font-family:'Advent Pro', sans-serif; font-weight:200; font-size:17px; color:#1C1C1C; } } .reposition { position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); } @media screen and (min-width: 768px) { .reposition { position:static; float:right; -webkit-transform: translate(-0%, -0%); -moz-transform: translate(-0%, -0%); } } .navbar-toggle { margin-top:13px; position:absolute; right:0; } .collapse { height:56px; width:100%; } .navbar-header { float:left; display:inline-block; height:55px; padding:0; margin:0; } .mainbody { width:100%; padding:0 0 20px 0; margin:0; float:left; } .slideshow { width:100%; margin:0; padding:0; } .fadein { width:100%; margin:0; padding:0; } .fadein img { width:95.9%; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } @media screen and (max-width: 1025px) { .fadein img { width:96%; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } } @media screen and (min-width: 1120px) { .fadein img { width:auto; height:85.8%; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } } @media screen and (min-width: 1441px) { .fadein img { width:72.3%; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } } .mainfooter { width:100%; height:20px; position:absolute; bottom:0; margin:0; padding:0; float:left; } .footer { position:relative; bottom:1px; float:right; width:100%; height:20px; padding:0 10px 0 0; background-color:#F8F8F8; border:1px solid #E7E7E7; margin:0; } .copyright { float:right; font-family: 'Advent Pro', sans-serif; font-weight: 100; font-size:12px; margin:0; padding:0; } @media screen and (min-width: 1441px) { .copyright { float:right; font-family: 'Advent Pro', sans-serif; font-weight: 200; font-size:12px; margin:0; padding:0; } } .media li { float:left; list-style:none; position:relative; right:30px; bottom:2px; margin:0 3px 0 3px; padding:0; } @media only screen and (max-width:480px) { .media li { display:none; } }
<!DOCTYPE html> <html lang="en"> <body onLoad="switchImage('slideImg')"> <div class="maincontainer"> <div class="mainheader"> <div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="index.html"> <div class="logo"> <p class="name">Tim Corin</p> <p class="type">Wildlife Photography</p> </div> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <div class="reposition"> <ul class="nav navbar-nav"> <a href=""><li class="home">Home</li></a> <a href=""><li class="gallery">Gallery</li></a> <a href=""><li>About</li></a> <a href=""><li>Contact</li></a> <a href=""><li>Blog</li></a> </ul> </div> </div> </div> </div> </div> </div> <div class="mainbody"> <div class="slideshow"> <div class="fadein"> <img src="images/frog.jpg" /> <img src="images/sunrays.jpg" /> <img src="images/beeeater.jpg" /> <img src="images/sunrise.jpg" /> <img src="images/darter.jpg" /> <img src="images/milkyway.jpg" /> </div> </div> </div> <div class="mainfooter"> <div class="footer"> <div class="social"> <ul class="media"> <p class="copyright">Copyright Tim Corin Photography 2015. All Rights Reserved.</p> <a href="http://www.facebook.com/timcorinphotography" target="_blank"><li class="facebook"><img src="images/facebook.png" height="16px"/></li></a> <a href="http://www.instagram.com/timcorinphotography" target="_blank"><li class="instagram"><img src="images/instagram.png" height="16px"/></li></a> <a href="http://www.twitter.com/timcorinphoto" target="_blank"><li class="twitter"><img src="images/twitter.png" height="16px"/></li></a> </ul> </div> </div> </div> <script type="text/javascript" src="scripts.js"></script> <script src="js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </body> </html>
看來頁腳中的ul正在向下推東西。 嘗試添加：
.media {
margin: 0;
padding: 0;
}
在Firefox和Chrome中最小化瀏覽器窗口會在頁面右側添加空白
[英]Minimizing browser window in Firefox & Chrome adds white space to right of page
Firefox Android 中帶有“white-space:pre-wrap”的“input”高度大於 Android 中的 Chrome
[英]Height of "input" with "white-space:pre-wrap" in Firefox Android is bigger than Chrome in Android
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.