0

http://i.imgur.com/mFtXm.jpgここにスクリーンショットがあります。

赤でマークされた領域は、問題がある場所です。Firefox でページを表示すると問題なく表示されます。Chrome では小さな隙間があります。つまり、対処しません。

これらの 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 に答える