Как правильно использовать% для динамического изменения div?

http://i.imgur.com/mFtXm.jpg вот скриншот.Как правильно использовать% для динамического изменения div?

Области, отмеченные красным цветом, являются проблемами. Когда я просматриваю страницу в firefox, она выглядит нормально, в хроме есть крошечные пробелы, я не имею дело с ie.

Каков правильный способ размера этих div, чтобы каждый 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

Нижний колонтитул, кажется, правильно соединяется. В чем проблема? Покажите HTML, используя этот CSS. –

@ VinayakGarg, отредактированный с кодом. когда я использую 80%, у него есть крошечные промежутки, его заметное: (81-85% тело будет перекрываться с нижним колонтитулом – iCodeLikeImDrunk

, используя% для ширины, сложно, потому что firefox & chrome round по-другому. Проверьте [this] (http: // stackoverflow. com/questions/6614204/rendering-of-html-in-firefox-and-chrome) – Yevgeniy

лучше просто изменить размер динамически, использовать JS, чтобы получить размер окна, то есть этот элемент настроить соответствующим образом.

источник

2012-04-15 20:58:21 iCodeLikeImDrunk

ах! это имеет смысл, плохо попробуйте! – iCodeLikeImDrunk

Как правильно использовать% для динамического изменения div?

ответ

Смежные вопросы