1

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

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 的第一行是：

<!-- <> -->

This is invalid syntax because it's in a CSS block, but if I omit it, the map won't show. Even if I omit the <> part of this line only, the map won't show anymore. I'm at a loss and really don't know how to keep it working without this strange line of code. If I keep the line though, Visual Studio keeps bugging me about invalid syntax. I don't like to have invalid syntax to keep my code running, so I hope that someone can tell me what I'm doing wrong here.

4

2 回答 2

2

Your <!-- <> --> is invalidating and causing your rules in the first set of curly brackets to break. This css,

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

along with your weird line of code should be removed, and everything should be fine. Specifically, it is the * {overflow: hidden;} which is the culprit.

于 2013-06-12T14:42:51.320 回答
0 
overflow: hidden;

is the problem

于 2013-06-12T14:44:48.600 回答