如何正確使用％來動態調整div的大小？

http://i.imgur.com/mFtXm.jpg這裏是一個截圖。如何正確使用％來動態調整div的大小？

以紅色標記的區域是問題所在。當我在firefox中查看頁面時，它看起來很好，在鉻中有微小的差距，我不處理ie。

什麼是正確的方式來調整這些股利，使每個div將「連接」與其他div沒有留下任何差距，每當瀏覽器更改？有jQuery或js的東西？

HTML：

<!doctype html> 
<html> 
    <head> 
     <link rel="stylesheet" href="./css/main.css" />  
    </head> 

    <body> 
     <div id="header"> 
      <h1>New York Tech Map</h1> 
     </div> 

     <div id="navlinks"> 
      <div class="topnav"> 
       <a href="">About Us</a> 
      </div> 
      <div class="topnav"> 
       <a href="">Contact Us</a> 
      </div> 
      <div class="topnav"> 
       <a href="">Sign Up</a> 
      </div> 
      <div class="topnav"> 
       <a href="">Help</a> 
      </div> 
     </div> 

     <div id="sidebar"> 

     </div> 

     <div id="map"> 

     </div> 

     <div id="footer"> 
      &copy; 2012 NYC Tech Map 
     </div>  
    </body>  
</html>

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    background: #F0F0F0; 
} 

a { text-decoration: none; color: grey; } 
a:hover{ color: red; } 

#header { 
    width: 100%; 
    height: 75px; 
    background: red; 
    margin-top: -21px; 
} 

#navlinks { float: right; width: 80%;} 

.topnav { 
    width: 25%; 
    height: 25px; 
    float: left; 
    padding-top: 5px; 
    background: #2D2D2D; 
    text-align: center; 
    font-family: arial, sans serif; 
    font-size: 15px; 
    font-weight: bold; 
} 

#sidebar { 
    width: 20%; 
    height: 500px; 
    float: left; 
    background: blue; 
} 

#map { 
    height: 80.8%; 
    width: 80%; 
    float: right; 

} 
. 
.popa:hover { 
    background: #D6D6D6;  
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 25px; 
    background: #2D2D2D; 
    text-align: center; 
    font-family: arial, sans serif; 
    font-weight: bold; 
    padding-top: 5px; 
    color: grey;  
}

來源

2012-04-14 iCodeLikeImDrunk

頁腳似乎正確地「連接」。那有什麼問題？使用這個CSS顯示HTML。 – 2012-04-14 04:57:42

@VinayakGarg用代碼編輯。當我使用80％它有微小的差距，其明顯:(81-85％的身體將與腳註 – iCodeLikeImDrunk 2012-04-14 05:03:04

重疊使用％寬度是棘手的，因爲Firefox和鉻輪不同。）檢查[this]（http：// stackoverflow。 com/questions/6614204/html-in-firefox-and-chrome）渲染出來 – Yevgeniy 2012-04-14 05:33:50

最好是剛剛動態調整，用js來獲得，則窗口的大小有一個元素相應的調整。

來源

2012-04-15 20:58:21 iCodeLikeImDrunk

啊！有道理，生病試試吧！ – iCodeLikeImDrunk 2012-04-15 20:58:42

如何正確使用％來動態調整div的大小？

回答

相關問題