我如何 select 包含 ID 的内部 <div>？

Question

在下面的标记中，我想将 MapView 的 container 属性设置为带有 Id = "viewDiv" 的 <div>。当我用 Id = "container" 移除外部 <div> 时，一切正常，并出现一张地图。当我运行使用外部容器<div>时，地图没有出现。如何将容器属性设置为内部 <div>?

  <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Get started with MapView - Create a 2D map</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
    <script src="https://js.arcgis.com/4.3/"></script>
    <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(Map, MapView){
      var map = new Map({
        basemap: "national-geographic"
      });
      var viewNode = document.getElementById("viewDiv");
      
      var view = new MapView({
        container: viewNode,  // Reference to the scene div created in step 5
        map: map,  // Reference to the map object created before the scene
        zoom: 4,  // Sets the zoom level based on level of detail (LOD)
        center: [15, 65]  // Sets the center point of view in lon/lat
      });
    });
    </script>
    </head>
    <body>
     <div id="container">
      <div id="viewDiv"></div>
     </div>
    </body>
    </html>

Answer 1

如果您移除外层 div 会起作用的原因是因为内层 div 的高度是 window 的 100%。但是对于外部 div，内部 div 的高度为 100% 的空（为外部 div 指定的高度）。所以给外层div一个高度。

#container {
  height: 100%
}

我如何 select 包含 ID 的内部 <div>？

How do I select the inner <div> containing an ID?

html

javascript

dom

arcgis