http://i.imgur.com/mFtXm.jpg这是屏幕截图。
红色标记的区域是问题所在。当我在 firefox 中查看页面时它看起来很好，在 chrome 中有微小的差距，我不处理 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">
© 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;
}
最佳答案
最好动态调整大小，使用 js 获取窗口大小，然后相应地调整该元素。
关于css - 如何正确使用 % 来动态调整 div 的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10151096/