0
http://i.imgur.com/mFtXm.jpgここはスクリーンショットです。動的にdivのサイズを変更するには％を正しく使用する方法は？
赤色の部分は問題のある場所です。私はFirefoxでページを見るとうまく見えますが、クロムには小さなギャップがあります。つまり、私は対処しません。
これらの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;
}
フッターが正しく「接続」されているようです。その問題は何ですか？このCSSを使用してHTMLを表示します。 –
@VinayakGargはコードで編集しました。私は80％を使用しているときにそれは小さなギャップを持って、その顕著な：（81~85％のボディはフッターと重複します – iCodeLikeImDrunk
幅のための％を使用すると、firefoxとクロムが異なるため丸ごと難しいです。 com/questions/6614204/html-in-firefox-and-chrome）の出力 – Yevgeniy