0

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;    
}
4

1 回答 1

0

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

于 2012-04-15T20:58:21.943 回答