3

これに対する答えが単純であることはわかっていますが、ヘッダー、map_canvas、およびサイドバーの 3 つの div を持つ非常に単純な HTML ページがあります。これらすべてを必要な場所に配置するための CSS があります。しかし、何らかの理由でブラウザウィンドウにスクロールバーが表示されますが、そこにスクロールバーを入れたくありません。ページをウィンドウの高さと幅にうまく合わせたいだけです。どんな助けでも大歓迎です。

私のページは次の HTML で構成されています。

<!doctype html>
<html>
    <head>
        <title>CSS Exercise</title>
        <link rel="stylesheet" href="css/style.css" />
        <script src="js/script.js"></script>
    </head>
    <body onload="initialize()">
        <div class="header"></div>
        <div id="map_canvas"></div>
        <div class="sidebar">
            <input id="lat" type="text" />
            <input id="lng" type="text" />
        </div>
    </body>
</html>​

そしてこのCSS：

body {
    height: 100%;
    width: 100%;
}

html {
    height: 100%;
}

.header {
    width: 100%;
}

#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
}

.sidebar {
    float: right;
    width: 20%;
    height: 100%;
    text-align: center;
}

#map_canvas {
   float: left;
   width: 80%;
   height: 100%;
}​

JSFミドルリンク

4

3 に答える 3

5

これにより、オーバーフローが隠され、スクロールバーが表示されなくなります。

body {
  overflow: hidden;
}
于 2012-05-10T02:50:27.073 に答える
0

CSS 宣言に追加overflow:hidden,するbody

于 2012-05-10T02:51:11.260 に答える
0

これを解決する簡単な方法は、タグoverflow-x: hidden;内で使用することです。body

于 2012-05-10T02:51:22.340 に答える