Веб-сайт имеет странные пробелы в правой части страницы, когда браузер изменен на меньшее окно

Я пробовал все, что мог придумать, но ничто, кажется, не устраняет проблему. Когда я просматриваю веб-сайт на полноэкранном режиме (на моем компьютере), он выглядит отлично, однако, когда я изменяю размер браузера на меньшее окно, справа от всего содержимого веб-сайта появляется очень странное белое пространство. Поскольку некоторые элементы имеют ширину 100%, я не могу понять, почему это пустое пространство переопределяет эти элементы.

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 fast, easy, and free.<br> 
<a href="register.php">Create an account now!</a> 
</div></body>

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;}

Веб-сайт: текст ссылки

Я понимаю, что позиционирование может быть нетрадиционным, а некоторые стили не использовались, я все еще в процессе разработки неиспользуемого кода. Но для моей жизни я не могу понять этого. Скриншоты ниже: ! [alt text] [2]

! [alt text] [3]

ОТВЕТЫ

Ответ 1

Попробуйте

html, 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

и удаляйте правила один за другим, пока не определите, какое правило удаляет пробелы.

Это действительно только маскировка проблемы с макетом, а не ее устранение. Попробуйте изучить пробел в инструментах вашего браузера dev и посмотреть, не идентифицирует ли он элемент, отличный от html или body. Это может быть какая-то маржа, применяемая к элементу на горизонтальном краю макета; Поля CSS работают "через" родительские элементы и в некоторых случаях могут смещаться от самого края страницы.

Идея здесь.

Ответ 2

Добавьте эту строку в конец вашего файла css:

* {
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
}

Затем вы узнаете, какой именно элемент вызывает проблему, вместо использования overflow-x: hidden, чтобы скрыть ошибку. Решение происходит от здесь.

Обновление (2017/9/20)

Это решение теперь доступно как расширение Chrome: GhostPage.

Ответ 3

Это сработало для меня. Я до сих пор не знаю, почему это происходит, но исправлено.

html, body {
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

Ответ 4

#linkarea ul имеет position: relative; left: 50%, поэтому он довольно точно придерживается пути.

Ответ 5

У меня эта проблема возникла совсем недавно. Я исправил его, добавив значение для min-width в CSS элемента body. Мне жаль, что я не знаю, что вызвало проблему, хотя я заметил это во всех основных браузерах, которые я использовал.

Надеюсь, что это поможет.

Изменить: Кстати, я не тестировал это на вашем коде, поэтому я не могу сказать, может ли это исправить вашу проблему. Он исправил мой, хотя.

Ответ 6

Я просто исправил аналогичную проблему. Единственный способ, с помощью которого я мог отследить проблему, которая оказалась скрытым вводом [type = "submit" ] из моей темы WordPress, заключалась в том, чтобы открыть Chrome Dev Tools и начать удалять куски HTML со страницы, пока я наконец не сделаю странные пробелы уходят. Таким образом, я смог эффективно развернуть этот маленький элемент по мере устранения.

Ответ 7

чтобы найти элемент, вызывающий эту проблему, попробуйте запустить его в консоли браузера (при условии, что у вас есть 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]);
    }
}

Он будет прокручивать все элементы в вашей DOM и регистрировать элемент, если ширина больше, чем у тела. Отсюда вы можете получить лучшее представление о том, что вызывает проблему (потому что она будет отличаться каждый раз), и вы можете ее устранить, а не просто прикрыть проблему с помощью overflow-x: hidden. Надеюсь, это поможет!

Ответ 8

Привет всем, у меня была такая же проблема, и я использовал этот код:

html, body {

 width: 100%;
height: auto;
margin: 0px;
padding: 0px;
overflow-x: hidden; }

Я надеюсь, что это может быть полезно

Ответ 9

Урок, который следует извлечь из этого, состоит в том, что любой элемент, имеющий ширину 100%, не должен иметь никакого левого или правого заполнения. Если это произойдет, iOS добавит это и отобразит пустую область справа, равную этому дополнительному заполнению.

Ответ 10

У меня была такая же проблема, оказалось, что html автоматически добавил margin: 8 в body. Мое решение:

body {
    margin: 0;
}

Ничего лишнего не понадобилось, чтобы решить это для меня.

[Править] Также попробуйте:

  1. body { width:100%;}
  2. * {box-sizing: border-box} узнайте больше на сайте mozzila
  3. Посмотрите файл сброса CSS, может пригодиться в будущем

Ответ 11

У меня была такая же проблема с моим сайтом Wordpress. Я попробовал решение overflow-x: hidden но оно не сработало. Затем я попробовал "страницу-призрак", чтобы попытаться отладить ее, но все еще не мог найти причину проблемы.

После этого я попытался запустить страницу в режиме инкогнито в Chrome. Потом я заметил, что разрыв пропал. Это был заголовок Wordpress, который вызвал проблему.

Каким-то образом рядом с моим аватаром в строке заголовка появилась строка, которая не была видна.

Я надеюсь, что это поможет всем, кто использует Wordpress.