3

我知道这个问题的答案很简单，但我有一个非常简单的 HTML 页面，有 3 个 div - header、map_canvas 和 sidebar。我有一些 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%;
}​

JSFiddle 链接

4

3 回答 3

5

这将隐藏任何溢出并防止显示滚动条。

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

添加overflow:hidden,到您的bodyCSS 声明中

于 2012-05-10T02:51:11.260 回答
0

解决此问题的一种简单方法是overflow-x: hidden;在body标签内使用。

于 2012-05-10T02:51:22.340 回答