CSS 当浏览器调整为较小的窗口时，网站在页面右侧出现奇怪的空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4612307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
提问by Joe
I've tried everything I can think of, yet nothing seems to fix the issue. When I view the website at full-screen (on my computer), it appears fine, however when I resize the browser to a smaller window, a very strange white space appears to the right of all the website content. Since some elements are set to 100% width, I can't seem to figure out why this white space is overriding those elements.
我已经尝试了所有我能想到的方法，但似乎没有任何方法可以解决问题。当我以全屏方式（在我的计算机上）查看网站时，它看起来不错，但是当我将浏览器调整为较小的窗口时，所有网站内容的右侧会出现一个非常奇怪的空白区域。由于某些元素设置为 100% 宽度，我似乎无法弄清楚为什么这个空白覆盖了这些元素。
HTML:
HTML：
<body>
<div id="bar">
<div id="linkarea">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="register.php">Register</a></li>
<li><a href="explore.php">Explore</a></li>
<li><a href="newtopic.php">New Debate</a></li>
<li><a href="contact.php">Contact</a></li>
</div>
</div><div id="sky">
<div id="cloud"></div>
<div id="cloud2"></div>
<div id="cloud3"></div>
<div id="cloud4"></div>
<div id="cloud5"></div>
<div id="cloud6"></div>
<div id="cloud7"></div>
<div id="cloud8"></div>
</div>
<div id="contenttop"></div><div id="container">
<img src="images/cloud0.png" id="cloud0" alt="TelUsY" />
<img src="images/logo1.png" id="logo" />
<img src="images/plane.png" id="plane" alt="TelUsY" />
<div id="userinfob">
<span id="logintext">
<form name="loginform" id="loginform" method="POST" action="/beta/index.php">
<input type="text" class="styled_login" name="access_login" id="loginface" value="username...">
<input type="password" class="styled_login" name="access_password" id="pwface">
<a class="button" id="loginbutton" href="#"><span>Login!</span></a></span>
</form>
<br>
<a href="password_recovery.php" class=>Forgot your password?</a>
</div>
<div id="content">
<div id="container_top">
<!-- Include Top Container Content -->
<center>
<form action="search.php" method="get" id="thesearch">
<table id="search" cellpadding=0 cellspacing=5 border=0>
<tr>
<td class="searchbar">
<!-- Search Box -->
<input type="text" name="query" size="20" value="Search..." class="search_field_out" id="searchbg" onFocus="changeOnFocus();" onBlur="changeOnBlur();">
</td>
<td class="searchbar" align="left">
<!-- Submit Button -->
<input type="image" src="images/search_icon2.gif" name="submit_search" id="submitbutton" onMouseOver="hoverButton();" onMouseOut="outButton();">
</td>
</tr>
</td>
</tr>
</table>
</form>
</center> </div>
<div id="leftcontent">
<a href="register.php"><img class="imgleft" src="images/1reg.png" /></a>
<div class="txtright">Registration is simple, and takes less than 5 minutes. Without an account, you will be able to view current debate topics, however you won't be able to share your opinion. <a href="register.php">Click here to sign up</a>, and begin using all the features of the TelUsY service now. </div>
<a href="explore.php"><img class="imgleft" src="images/2explore.png" /></a>
<div class="txtright">Once you have an account, you can begin browsing through current debates by choosing a category, or searching for a more specific word or phrase with the search bar. You can also find recent popular topics on the Explore page.</div>
<a href="newtopic.php"><img class="imgleft" src="images/3debate.png" /></a>
<div class="txtright">Once you've found a topic that you find interesting, feel free to post your opinion by clicking on either the red or green box. If you agree or disagree with an opinion, but don't want to post a counter-argument simply click on either the red or green icon to cast your vote on that topic.</div>
</div>
<div id="rightcontent">
<h2>Popular Debates</h2>
<ol>
<a href="view.php?topic=zIG1294266765NV"><li>Arsenal should have defeated Mancheste...</li></a>
<a href="view.php?topic=iRr1294268603PF"><li>The Ricky Gervais show is absolutely h...</li></a>
<a href="view.php?topic=hed1294268314uo"><li>Starcraft 2 is one of the best online ...</li></a>
<a href="view.php?topic=eGX1294268407ow"><li>President Barack Obama should be doing...</li></a>
<a href="view.php?topic=vLA1294268494sG"><li>Macaroni Grill is one of the best Ital...</li></a>
</ol>
<h2>Recent Debates</h2>
<ol>
<a href="view.php?topic="><li>dsnfkldsj fklsdf j sdlkfjdsfklj sdfkld...</li></a>
<a href="view.php?topic="><li>The Miami heat shouldn't be hated on f...</li></a>
<a href="view.php?topic="><li>More Americans should limit their fast...</li></a>
<a href="view.php?topic="><li>The Ricky Gervais show is absolutely h...</li></a>
<a href="view.php?topic="><li>Macaroni Grill is one of the best Ital...</li></a>
</ol>
<h2>Categories</h2>
<ul>
<a href="search.php?category=1"><li>Sports</li></a>
<a href="search.php?category=2"><li>Food</li></a>
<a href="search.php?category=3"><li>Games</li></a>
<a href="search.php?category=4"><li>Business</li></a>
<a href="search.php?category=5"><li>Politics</li></a>
<a href="search.php?category=6"><li>Technology</li></a>
<a href="search.php?category=7"><li>Television</li></a>
<a href="search.php?category=8"><li>Music</li></a>
<a href="search.php?category=9"><li>Health</li></a>
<a href="search.php?category=10"><li>Home & Garden</li></a>
</ul> </div> <div id="footer"><div id="footerarea">
Copyright 2010 TelUsY. All rights reserved.<br />
<a href="index.php">Home</a> |
<a href="register.php">Register</a> |
<a href="explore">Explore</a> |
<a href="newtopic.php">New Debate</a> |
<a href="contact.php">Contact</a>
</div></div> </div>
</div>
<div id="bad_login" title="Login Unsuccessful" class="dialog" style="display:none"><center>
The username and password you entered did not match our records.<br><a href="#" onclick="closeME('bad_login');">Close this box and try again</a>.
<br><br>
If you don't have an account yet, register today! It's fast, easy, and free.<br>
<a href="register.php">Create an account now!</a>
</div></body>
CSS:
CSS：
@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'CoolveticaRegular';
src: url('../fonts/coolvetica_rg_0-webfont.eot');
src: local('?'), url('../fonts/coolvetica_rg_0-webfont.woff') format('woff'), url('../fonts/coolvetica_rg_0-webfont.ttf') format('truetype'), url('../fonts/coolvetica_rg_0-webfont.svg#webfonthn4Mp3Kg') format('svg');
font-weight: normal;
font-style: normal;
}
html, body, div, h1, h2, h3, ul, ol, li, form, fieldset, input, textarea {margin: 0; padding: 0; font-size: 100%;}
img {border:none;}
a {border:none;}
html {width:100%;}
body {background-color:#FFF; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size:12px; width:100%;}
#container {width:1024px; margin:0pt auto; text-align:center; position:relative; clear:both; z-index:10;}
#logo {position:absolute; z-index:10; top:20px; left:35px;}
#userinfoa {width:270px; height:45px; position:absolute; top:40px; right:20px; z-index:10; color:#FFF; line-height:20px;}
#userinfoa a {border:none; color:#FFF;}
#userinfoa a:hover {border:none; text-decoration:none; color:#CCC;}
#userinfoa a:active {border:none; color:#FFF;}
#userinfob {width:270px; height:45px; position:absolute; top:40px; right:20px; z-index:10; color:#FFF; line-height:15px;}
#userinfob a {border:none; color:#FFF;}
#userinfob a:hover {border:none; text-decoration:none; color:#CCC;}
#userinfob a:active {border:none; color:#FFF;}
#bar {height:42px; width:100%; background-image:url(../images/bar.png); background-repeat:repeat-x; z-index:2; overflow:visible; min-width:100%;}
#sky {height:312px; width:100%; position:absolute; background-color:#5ba2ca; z-index:1; clear:both; overflow:visible; min-width:100%;}
#contenttop {height:166px; width:100%; position:absolute; top:271px; background-image:url(../images/cloudt.png); background-position:top left; background-repeat:repeat-x; z-index:2; overflow:hidden;}
#cloud0 {position:absolute; left:0px; top:0px; z-index:5;}
#cloud {position:absolute; top:110px; left:0%; z-index:2; width:159px; height:113px; background-image:url(../images/cloud1.png); background-repeat:no-repeat;}
#cloud2 {position:absolute; top:170px; left:15%; z-index:1; width:44px; height:45px; background-image:url(../images/cloud2.png); background-repeat:no-repeat;}
#cloud3 {position:absolute; top:100px; left:30%; z-index:3; width:77px; height:60px; background-image:url(../images/cloud3.png); background-repeat:no-repeat;}
#cloud4 {position:absolute; top:50px; left:45%; z-index:4; width:138px; height:97px; background-image:url(../images/cloud4.png); background-repeat:no-repeat;}
#cloud5 {position:absolute; top:20px; left:60%; z-index:2; width:159px; height:113px; background-image:url(../images/cloud1.png); background-repeat:no-repeat;}
#cloud6 {position:absolute; top:70px; left:90%; z-index:1; width:44px; height:45px; background-image:url(../images/cloud2.png); background-repeat:no-repeat;}
#cloud7 {position:absolute; top:130px; left:75%; z-index:3; width:77px; height:60px; background-image:url(../images/cloud3.png); background-repeat:no-repeat;}
#cloud8 {position:absolute; top:115px; left:85%; z-index:4; width:138px; height:97px; background-image:url(../images/cloud4.png); background-repeat:no-repeat;}
#content {position:absolute; top:325px; left:0px; background-color:#FFF; clear:both; width:100%; padding:20px 20px 0 20px; z-index:100;}
#mainnode {position:relative; width:578px; height:168px; background-color:#e7f5fe; border:1px solid #2979a5; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; margin:0 auto; clear:both;}
#maincontent {position:absolute; width:538px; left:20px; top:35px; height:110px; font-size:14px; text-align:left; color:#04436a; overflow:auto;}
#parentnode {position:relative; text-decoration:none; width:350px; height:125px; background-color:#e7f5fe; color:#04436a; border:1px solid #2979a5; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; margin:0 auto; clear:both; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
.nodecontent {position:absolute; width:310px; left:20px; top:35px; height:80px; font-size:14px; text-align:left; overflow:hidden;}
#childnodel {position:relative; width:350px; height:125px; background-color:#b6df8e; color:#3b781d; border:1px solid #25520f; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
#childnoder {position:relative; width:350px; height:125px; background-color:#f08d97; color:#902217; border:1px solid #521711; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
#agreebtn {position:absolute; bottom:-27px; left:-27px;}
#disagreebtn {position:absolute; bottom:-27px; right:-27px;}
#percents {width:100%; position: absolute; bottom:2px; color:#04436a; text-align:center; margin:0 auto; font-size:16px;}
.red {color:#a61c28;}
.green {color:#72b332;}
#postinfomain {width:538px; position: absolute; left:20px; top:5px; color:#04436a; text-align:center; margin:0 auto; font-size:14px; }
#postinfomain hr {border:0px solid #04436a; height:1px; background-color:#04436a;}
.postinfo {width:310px; position: absolute; left:20px; top:5px; text-align:center; margin:0 auto; font-size:14px; }
#parentnode hr {border:0px solid #04436a; height:1px; background-color:#04436a}
#parentnode a {text-decoration:none; color:#04436a;}
#childnodel hr {border:0px solid #04436a; height:1px; background-color:#3b781d;}
#childnodel a {color:#3b781d; text-decoration:none;}
#childnoder a {color:#902217; text-decoration:none;}
#childnoder hr {border:0px solid #04436a; height:1px; background-color:#902217;}
.rightpost {float:right; font-style:italic;}
.rightpost_votes {float:right; font-weight:bold; padding-right:25px; color:red;}
.leftpost {float:left; font-weight:bold; }
.leftpost_votes {float:left; font-weight:bold; padding-left:25px; color:green;}
#plane {position:absolute; top:35px; right:0px; z-index:3;}
#linkarea {height:40px; width:100%; margin:0 auto; min-width:1024px; position:relative; float:left;}
#linkarea a {font-family:CoolveticaRegular, Georgia, serif; color:#FFF; font-size:18px; text-decoration:none;}
#linkarea a:hover {font-family:CoolveticaRegular, Georgia, serif; color:#FC3;}
#linkarea a:active {font-family:CoolveticaRegular, Georgia, serif; color:#FFF;}
#linkarea ul {list-style-type:none; text-align:center; padding-top:14px; text-align:center; float:left; position:relative; left:50%;}
#linkarea ul li {float:left; display:block; right:50%; position:relative; padding:0 60px 0 60px;}
#footer {height:100px; width:1024px; margin:0 auto; background-image:url(../images/footer.png); color:#FFF; clear:both; text-align:center;}
#footer a {color:#FFF;}
#footerarea {padding-top:40px;}
#leftcontent {width:593px; padding:20px 0 20px 20px; float:left; text-align:left; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#000; font-size:14px; text-decoration:none; line-height:18px;}
#rightcontent ul li {margin-left:35px; line-height:18px; margin-bottom:10px;}
#rightcontent ol li {margin-left:35px; line-height:18px; margin-bottom:10px;}
#rightcontent a:hover {color:#999;}
#rightcontent a {color:#04436a;}
#leftcontent a:hover {color:#999;}
#leftcontent a {color:#04436a;}
#rightcontent {width:371px; padding:20px; float:right; text-align:left; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#000; font-size:14px; text-decoration:none; line-height:18px;}
#rightcontent h2 {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#04436a; font-size:24px; line-height:18px; padding-bottom:15px; padding-top:15px;}
#searchbg {width:300px; height:48px; display:block; border: 0;}
.imgleft {float:left; clear:both; width:212px; height:190px;}
.txtright {float:left; padding:12px 0 20px 20px; width:356px; font-size:18px; height:190px;}
.txtright a {color:#999; text-decoration:none;}
.txtright a:hover {color:#ccc;}
a.button {margin-top:3px; margin-left:2px; background: transparent url('../images/button_a.png') no-repeat scroll top right; color: #FFF; display: block; float: left; font: normal 14px Georgia, serif; height: 25px;
padding-right: 5px; /* sliding doors padding */ text-decoration: none;}
a.button span {color: #FFF; background: transparent url('../images/button.png') no-repeat; display: block; line-height: 16px; padding: 0 5px 5px 9px;}
.pusher {padding-bottom:105px;}
The website: link text
网站：链接文字
I understand the positioning may be unconventional and some styles haven't been used, I'm still in the process of working out the unused code. But for the life of me, I can't figure this one out. Screenshots below: ![alt text][2]
我理解定位可能是非常规的，有些样式还没有使用，我仍在处理未使用的代码。但对于我的生活，我无法弄清楚这一点。以下屏幕截图：![替代文字][2]
![alt text][3]
![替代文字][3]
回答by iono
Try
尝试
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
and delete rules one by one until you identify which rule removes the whitespace.
并一一删除规则，直到您确定哪个规则删除了空格。
This is really only disguisingthe layout problem, not addressing it.Try inspecting the gap with your browser dev tools and see if it identifies an element other than htmlor body. It could be some kind of margin applied to an element on the horizontal edge of the layout; CSS margins work "through" parent elements and can offset from the page edge itself, in some cases.
这实际上只是掩盖了布局问题，而不是解决它。尝试使用浏览器开发工具检查差距，看看它是否标识了除html或之外的元素body。它可能是应用于布局水平边缘元素的某种边距；在某些情况下，CSS 边距“通过”父元素工作，并且可以从页面边缘本身偏移。
Idea from here.
想法来自这里。
回答by Grey Li
Add this line at the end of your CSS file:
在 CSS 文件的末尾添加这一行：
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Then you will found out exactly which element cause the problem, instead of using overflow-x: hiddento hide the bug. The solution comes from here.
然后你会发现到底是哪个元素导致了问题，而不是overflow-x: hidden用来隐藏错误。解决方案来自这里。
Update (2017/9/20)
更新 (2017/9/20)
This solution now available as a Chrome extension: GhostPage.
此解决方案现在可作为 Chrome 扩展程序使用：GhostPage。
回答by user7075854
This worked for me. I still don't know why this happens, but fixed for now.
这对我有用。我仍然不知道为什么会发生这种情况，但现在已修复。
html, body {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
回答by Quentin
#linkarea ulhas position: relative; left: 50%so it sticks out to the right quite a ways.
#linkarea ul有position: relative; left: 50%所以它在很多方面都很突出。
回答by DeVilFisCh
I got this problem too just a while ago. I fixed it by adding a value for min-widthunder the CSS of the bodyelement. I wish I knew what was causing the problem though as I noticed it in every major browser I used.
不久前我也遇到了这个问题。我通过min-width在body元素的 CSS 下添加一个值来修复它。我希望我知道是什么导致了问题，因为我在我使用的每个主要浏览器中都注意到了它。
Hope this helps.
希望这可以帮助。
Edit: By the way, I haven't tested this on your code so I can't really say if this can fix your problem. It fixed mine though.
编辑：顺便说一下，我没有在你的代码上测试过这个，所以我不能说这是否可以解决你的问题。不过它修复了我的。
回答by Devin Mooers
I just fixed a similar problem. The only way I could track down the problem, which turned out to be a hidden input[type="submit"] from my WordPress theme, was to open up Chrome Dev Tools and start deleting chunks of HTML from the page until I finally made the weird whitespace go away. That way I was able to efficiently drill down to this tiny little element by process of elimination.
我刚刚修复了一个类似的问题。我可以找到问题的唯一方法，结果证明是我的 WordPress 主题中的隐藏输入 [type="submit"]，是打开 Chrome Dev Tools 并开始从页面中删除 HTML 块，直到我最终完成奇怪的空白消失了。这样我就能够通过消除过程有效地深入到这个微小的元素。
回答by hot_barbara
to find the element causing this problem try running this in your browsers console (assuming you have jquery available):
要找到导致此问题的元素，请尝试在浏览器控制台中运行它（假设您有可用的 jquery）：
var all = document.body.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
if (jQuery('body').outerWidth() < jQuery(all[i]).outerWidth()) {
console.log(all[i]);
}
}
It'll loop through all the elements in your DOM and log the element if it's width is bigger than the body's. From here you can have a better idea at what's causing the problem (because it's going to be different every time) and you can troubleshoot it accordingly rather than just covering up the problem with overflow-x: hidden. Hope this helps!
它将遍历 DOM 中的所有元素，如果元素的宽度大于主体的宽度，则记录该元素。从这里您可以更好地了解导致问题的原因（因为每次都会有所不同），并且您可以相应地对其进行故障排除，而不仅仅是使用overflow-x: hidden. 希望这可以帮助！
回答by hot_barbara
Hello everyone I had the same problem and I used this code:
大家好，我遇到了同样的问题，我使用了以下代码：
html, body {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
overflow-x: hidden; }
I hope it can be useful
我希望它有用
回答by matinfo
The lesson to take from this is that any element having a width of 100% should not have any left or right padding. If it does, iOS will add that and display a blank area to the right equal to that extra padding.
从中吸取的教训是，任何宽度为 100% 的元素都不应该有任何左填充或右填充。如果是这样，iOS 将添加它并在右侧显示一个空白区域，该区域等于额外的填充。
回答by 1116574
I had the same issue, turned out that html automatically added margin: 8to body. My solution:
我遇到了同样的问题，原来 html 自动添加margin: 8到正文中。我的解决方案：
body {
margin: 0;
}
Nothing extra was needed to solve this for me.
不需要额外的东西来为我解决这个问题。
[Edit] Also, try:
[编辑]另外，尝试：
body { width:100%;}* {box-sizing: border-box}learn more on mozzila's site- Look up CSS reset file, might be useful in future
body { width:100%;}* {box-sizing: border-box}在 mozzila 的网站上了解更多信息- 查找 CSS 重置文件，将来可能有用
