javascript - 如何选择包含 ID 的内部 <div>?

标签 javascript html dom arcgis

在下面的标记中,我想设置 container MapView 的属性为 <div>Id =“viewDiv”。当我移除外部 <div>Id =“容器”一切正常并出现 map 。当我使用外部容器 <div> 运行时, map 不出现。如何将容器属性设置为内部<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>

最佳答案

如果删除外部 div,它会起作用的原因是内部 div 的高度为窗口的 100%。但是对于外部 div,内部 div 的高度为 100%(为外部 div 指定的高度)。因此给外部 div 一个高度。

#container {
  height: 100%
}

关于javascript - 如何选择包含 ID 的内部 <div>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42793255/

相关文章:

java - 如何在不覆盖现有数据的情况下使用 DOM append 现有 XML 文件?在 java

javascript - 单击 "submit"按钮后如何保持在同一页面,并保留我在 JavaScript 中输入的日期

javascript - 如何在play框架中为不同的 View 页面指定不同的JS文件?

javascript - Angular : $q. defer() 与 $q()

php - body 图像定位与 body

html - 表在 tr 中设置最大行数

PHP 从 MySQL 回显 HTML 作为同级而不是子级插入

javascript - 基于条件的动态行选择

javascript - 您可以使用 event.target 定位元素父元素吗?

html - Angular 8 : Set default selected value for select tag