Question

我正在尝试创建一个显示几乎全屏地图的网页。地图应填充页眉和页脚之间的空间。这是我到目前为止的代码：

HTML：

<header>
    <div class="mainBodyElement" id="header">
    </div>
</header>

<div id="content">
    <div id="map"></div>
</div>

<footer>
    <div class="mainBodyElement" id="footer">
        <p>&copy; 2013</p>
    </div>
</footer>

使用Javascript：

var map;

function initOpenLayers() {
    /* Example code from openlayers.org */
    map = new OpenLayers.Map({
        div: "map",
        layers: [
        new OpenLayers.Layer.OSM("OSM (without buffer)"),
        new OpenLayers.Layer.OSM("OSM (with buffer)", null, {
            buffer: 2
        })],
        controls: [
        new OpenLayers.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new OpenLayers.Control.PanZoom(),
        new OpenLayers.Control.Attribution()]
    });

    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.zoomToMaxExtent();
}

$(document).ready(function () {
    initOpenLayers();
});

CSS：

<!-- <> -->
* {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}
html, body {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}
.mainBodyElement {
    position: absolute;
    width: 100%;
    overflow: hidden;
}
#header {
    top: 0;
    left: 0;
    height: 50px;
    background-color: #2CA07A;
    color: white;
}
#footer {
    top: auto;
    bottom: 0;
    height: 34px;
    width: 100%;
    overflow: hidden;
    background-color: #2CA07A;
    color: white;
}
#content {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 34px;
    overflow: auto;
    background: #EEE;
}
/* login
    ----------------------------------------------------------*/
#login {
    float: right;
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}
#login a {
    background-color: #d3dce0;
    margin-left: 10px;
    margin-right: 3px;
    padding: 2px 3px;
    text-decoration: none;
}
#login .email {
    background: none;
    margin: 0;
    padding: 0;
    color: #CCCCCC;
}
#login ul {
    margin: 0;
}
#login li {
    display: inline;
    list-style: none;
}
#map {
    width: 100%;
    height: 100%;
}

我创建了一个小提琴（http://jsfiddle.net/palpitation/MUKRe/3/），它显示了一个工作示例（当你放大时它会填充，这是正常的），但它也显示了我的问题：

CSS的第一行是：

<!-- <> -->

这是无效的语法，因为它位于CSS块中，但如果我省略它，则地图将不会显示。即使我省略了此行的<>部分，地图也不再显示。我很茫然，如果没有这种奇怪的代码，我真的不知道如何让它保持工作。如果我保持这一行，Visual Studio一直在告诉我有关无效语法的问题。我不喜欢使用无效的语法来保持我的代码运行，所以我希望有人可以告诉我这里我做错了什么。

Answer 1

您的无效并导致第一组花括号中的规则中断。这个css，

* {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

应该删除

以及你奇怪的代码行，一切都应该没问题。具体来说，* {overflow: hidden;}是罪魁祸首。

Answer 2

overflow: hidden;

是问题

仅当CSS包含语法错误时，才会显示Openlayers Map

2 个答案: