Question

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">
            &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;    
}

Answer 1

最好只是动态调整大小，使用js获取窗口大小，然后相应地调整元素。

如何正确使用％来动态调整div？

1 个答案: