一个带标题栏，中部自动铺满区域和底部按钮区域的对话框div布局

1. <div id="dlg_new" align="center" style="z-index:100;border-radius:5px;margin:auto;background-color:#444444;top:0;left:0;right:0;bottom:0;width:90%;height:80%;position:fixed;display:flex;flex-direction:column;border:1px solid #444444">
2.  <div style="display:flex; align-items:center; width:100%; color:white; padding: 4px 24px 4px 20px; flex-shrink:0;">
3.   发布新内容
4.   <div style="margin-left:auto;margin-right:28px;width:24px;height:24px;border: 2px solid white;border-radius: 50%;" onclick="hide();">✖</div>
5. </div>
6.  <div id="editor" style="flex-grow:1;background-color:white; text-align:left;overflow-y:auto;display:flex;flex-direction:column;" onfocus="this.select();"><div style="width:100%;height:100%;display:block" contenteditable></div></div>
7.  <div style="margin:10px;flex-shrink:0;">
8.   <div style="text-align:left;vertical-align: middle;color:white;float:left;width:70%">过期日期 <input id="ex_date" type="date" min="2023-04-30"/></div>
9.   <div align="right" style="float:right;width:30%"><input type="submit" onclick="add()"/> &nbsp; <input type="reset" onclick="hide();"/> &nbsp;</div>
10.  </div>
11.  <script>
12.    function hide() {
13.   document.getElementById('dlg_new').style.display='none';
14.    }
15.  </script>
16. </div>