即使我将3个容器div的宽度设置为100％，网站也无法正常显示

Question

我不确定这里的问题是什么，但它使我感到沮丧。 我有一个用于徽标和链接的标头div，一个用于主要部分的包装div，然后是一个页脚。 宽度全部设置为100％，但是由于某种原因，右侧和底部溢出了空白。 这样做很有趣，如果我将鼠标移至页脚下方的空白处，则会选择页眉中的联系人链接！

他们有相当多的html和css，因此我决定只将你们链接到jfiddle，这样可以更容易地向您展示问题所在。 请注意，即使包装器的背景色设置为灰色，页眉的背景设置为白色，而页脚的背景设置为灰色，您仍可以向右滚动并找到空白。 都具有100％的宽度。 由于某种原因，页脚下方甚至会有空白。

我希望所有这些都有意义，并感谢您的帮助。 我敢肯定它有些愚蠢和明显，但我还是有点新！

http://jsfiddle.net/46andtool/Q2d4K/2/

这是主要的div CSS

/*body element*/ 

body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif;  }

/*contains #main and #footer*/

    #wrapper { width:100%; background-color:grey; border: none;}

#main { width:100%; margin: 0 auto; border: none;}/*main body of website, wrapped inside of the wrapper div*/

/*div that contains the banner and navigation*/

.header {width: 100%; margin: 0 auto;  background-color: #FFFFFF;  padding-bottom: 10px; margin-bottom: 10px;}

/*Logo*/

 #banner {float: left; max-width: 100%; margin: 0; padding: 0;}

/*navigation*/ 

#w { max-width: 100%; background-color: #FFFFFF; margin: 0; padding: 0; } 

和html：

<body>
 <div class="header">
    <a href="index.php"><img id="banner" src="img/******.png" alt="*******"></a>   
        <div id="w">
                <nav>
                    <ul id="ddmenu">
                        <li><a href="#">About</a>
                            <ul>
                                <li><a href="#">Our Mission</a></li>
                                <li><a href="#">The Staff</a></li>
                                <li><a href="#">History</a></li>

                            </ul>
                        </li>
                        <li><a href="#">Services</a>
                            <ul>
                                <li><a href="#">*****</a></li>
                                <li><a href="#">******</a></li>
                                <li><a href="#">******</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Links</a>
                            <ul>
                                <li><a href="#">China</a></li>
                                <li><a href="#">Japan</a></li>
                                <li><a href="#">Canada</a></li>
                                <li><a href="#">Australia</a></li>
                                <li><a href="#">South America</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.php">Contact Us</a></li>
                    </ul>
                </nav>
            </div>
        </div>


<div id="wrapper">
   <div id="main">
    <div id="innermain">
        <h1>Latest News and Events</h1>
        <h2>Welcome to !</h2>
          <p>gsfdgdfgsdfgsdfg
          </p>

         <div id="linebreak"></div> 
          <p>gfdhgdfhfgh</p>
          <br>

          <p>hgdhfghgfh</p>
          <br>

          <p>gdhfgdhfghfgh</p>
          <br>
    </div>

     <div id="rightside">
       <h1>Where To Find Us</h1>
       <a href="img/buildingpic.jpg"><div id="buildingpic"></div>  </a> 
       <div id="map_canvas"></div> 
       <p id="location">sadfasdfsadsdf<br> asdfsdfa<br> asdfdsfds<br> 555-3423</p>
    </div>
  </div>
</div>

<div id="footer">

  Site design by <a class ="links" href="example@yahoo.com">fsgfdg</a></a>&nbsp; &copy;   <?php echo date('Y');?> All Rights Reserved

</div>

</body>

Answer 1

这里有几件事会引起问题。

您的body自动带有边距，因此，如果您未专门设置margin:0px; ，它将溢出margin:0px;

您的#footer的width:100%; 但它也有padding:10px 。 这些被合并，所以您有width:100% + 10px的填充。 尝试做类似我提供的事情，即width:94%; 和padding:10px 3%; 因此您的宽度变为94% + 3% + 3% = 100%

最后，您的#buildingpic元素具有width:300px ，在这种情况下，它比其所在的容器还要宽。您最好将其设置为width:100%和height:auto; 自动限制容器的比例。 在这种情况下，我设置max-width:100%;

http://jsfiddle.net/Q2d4K/4/

此外，如果您始终使用ID，您将度过一生。 尝试对元素使用类，以便在需要时可以重复使用它们，或者至少在重复或选择优先级方面不存在问题。