即使我將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，您將度過一生。 嘗試對元素使用類，以便在需要時可以重復使用它們，或者至少在重復或選擇優先級方面不存在問題。

即使我將3個容器div的寬度設置為100％，網站也無法正常顯示

問題描述

1 個解決方案

解決方案1
1 已采納 2014-03-17 02:39:58

即使我將3個容器div的寬度設置為100％，網站也無法正常顯示

問題描述

1 個解決方案

解決方案1 1 已采納 2014-03-17 02:39:58

解決方案1
1 已采納 2014-03-17 02:39:58