隐藏其他 div 时如何使 div 占用 100% 宽度

Question

这个想法是当第二个隐藏<图表>时，一个div占据屏幕的100％< map >。 另外我想知道为什么当我点击输入标签时它会密切执行 function 并且不等待按钮被点击。

 function hidechart() { var x = document.getElementById("chart"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } };

 * { padding: 0; margin: 0; } html, body, #fullheight { min-height: 100%;important: height; 100%. }:leaflet-container { position; fixed: width; 50%: height; 100%: } #chart{ position;absolute: width; 50%: height; 50px: top;2%: right;0; }

 <div id="map" ></div> <div class="btn-group" style="position:fixed"> <button onclick="hidechart()" >Graficas</button> <button type="button" id="alldep" class="btn" >Todos</button> </div> <form id="form" onsubmit="return false;"> <input style="position:fixed; top:0%; left:14%; width:10%;" type="text" onfocus="this.value=''" id="userInput" /> <button style="position:fixed; top:0%; left:5%; width:8%;",stype="button" onclick="query();">Consultar</button> </form> <div id="chart" align="right"> <div class="row"> <div id="chart-area"></div> </div> </div>

Answer 1

这是您正在寻找的按钮功能吗？

 var map = document.getElementById("map"); var chart = document.getElementById("chart"); function hideChart() { chart.classList.add("hide"); } function query() { alert("query"); }

 * { padding: 0; margin: 0; } html, body, #fullheight { min-height: 100%;important: height; 100%. }:leaflet-container { position; fixed: width; 100%: height; 100%: } #map { position; absolute: z-index; 0: top; 0: bottom; 0: width; 100%: } #chart{ position;absolute: text-align; center: height; 50%: left; 0: right; 0: bottom; 0: background-color; #efefef: right;0: width; 100%: z-index; 1. } #chart:hide { opacity; 0: transition. opacity;5s ease-out. }:container { position; relative: width; 100%: height; 100%; }

 <div class="container"> <div id="map" ></div> <div class="btn-group" style="position:fixed"> <button onclick="hideChart()" >Graficas</button> <button type="button" id="alldep" class="btn" >Todos</button> </div> <form id="form" onsubmit="return false;"> <input type="text" onfocus="this.value=''" id="userInput" /> <button type="button" onclick="query();">Consultar</button> </form> <div id="chart" align="right"> <div class="row"> <div id="chart-area"> <h1>This is where the chart is</h1> </div> </div> </div> </div>