javascript - 以html形式划分部分

Question

我将我的 html 页面分成 3 个部分，具有指定的高度，如下所示。现在我想把我的下一段代码放在上面部分的下面，也放在网页中间。但是我无法获得预期的数据。

html,
body {
  height: 100%;
  margin: 0;
}

div {
  height: 30%;
  background-color: white;
  float: left;
}

#left {
  width: 500px;
  margin: 5px;
}

#center {
  width: 500px;
  margin: 5px;
}

#right {
  width: 500px;
  margin: 5px;
}

#tablediv {
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  top: 100%;
}

<div id="left">ID <input type="text" id="grn" class="tb1" onkeypress="return isNumber(event)" autofocus="autofocus" /><br><br> Type
  <select name="evalu" id="evalu">
	<option value="electrical">Electrical</option>
	<option value="mechanical">Mechanical</option>
</select><br><br>
  <input type="button" id="find" value="Find" class="button0" /><br><br>
</div>
<div id="center">
  Name: <input type="hidden" id="name" class="tb1" /><br><br> Section : <input type="hidden" id="sec" class="tb1" /><br><br> V.Inv.No <input type="hidden" name="vinvno" id="vinvno" class="tb1" /><br><br> V.Inv.Date <input type="hidden" name="vinvdt" id="vinvdt"
    class="tb1" /><br><br>
</div>
<div id="right">
  IRno: <input type="hidden" name="irepno" id="irepno" class="tb1" maxlength="8" /><br><br> IDate <input type="date" name="idt" id="idt" class="tb1" value="<%= new SimpleDateFormat(" dd-MM-yyyy ").format(new java.util.Date())%>"><br><br>
  <input type="button" id="search" value="Search" class="button0" /><br><br>
</div>
<div id="tablediv">
  <input type="button" value="Show Item List" id="showTable" class="button0" />
  <table cellspacing="0" id="itemtable" align="center">
    <tr>
      <td><input type="checkbox" class="btnSelect" id="chk" name="chkOrgRow" /></td>
      <th scope="col"> SIno</th>
      <th scope="col">Item name</th>
      <th scope="col">Item code</th>
      <th scope="col">Supplier</th>
      <th scope="col">Received qty</th>
      <th scope="col">Accepted qty</th>
      <th scope="col">Rejected qty</th>
      <th scope="col">Remarks</th>
    </tr>
  </table>
</div>

modified

Answer 1

#tablediv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

它将使 tablediv 保持在顶部内容和页面之间的中间。

html,
body {
  height: 100%;
  margin: 0;
}

div {
  height: 30%;
  background-color: white;
  float: left;
}

#left {
  width: 500px;
  margin: 5px;
}

#center {
  width: 500px;
  margin: 5px;
}

#right {
  width: 500px;
  margin: 5px;
}

@media (min-width: 786px) {
  #tablediv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

<div id="left">ID <input type="text" id="grn" class="tb1" onkeypress="return isNumber(event)" autofocus="autofocus" /><br><br> Type
  <select name="evalu" id="evalu">
	<option value="electrical">Electrical</option>
	<option value="mechanical">Mechanical</option>
</select><br><br>
  <input type="button" id="find" value="Find" class="button0" /><br><br>
</div>
<div id="center">
  Name: <input type="hidden" id="name" class="tb1" /><br><br> Section : <input type="hidden" id="sec" class="tb1" /><br><br> V.Inv.No <input type="hidden" name="vinvno" id="vinvno" class="tb1" /><br><br> V.Inv.Date <input type="hidden" name="vinvdt" id="vinvdt"
    class="tb1" /><br><br>
</div>
<div id="right">
  IRno: <input type="hidden" name="irepno" id="irepno" class="tb1" maxlength="8" /><br><br> IDate <input type="date" name="idt" id="idt" class="tb1" value="<%= new SimpleDateFormat(" dd-MM-yyyy ").format(new java.util.Date())%>"><br><br>
  <input type="button" id="search" value="Search" class="button0" /><br><br>
</div>
<div id="tablediv">
  <input type="button" value="Show Item List" id="showTable" class="button0" />
  <table cellspacing="0" id="itemtable" align="center">
    <tr>
      <td><input type="checkbox" class="btnSelect" id="chk" name="chkOrgRow" /></td>
      <th scope="col"> SIno</th>
      <th scope="col">Item name</th>
      <th scope="col">Item code</th>
      <th scope="col">Supplier</th>
      <th scope="col">Received qty</th>
      <th scope="col">Accepted qty</th>
      <th scope="col">Rejected qty</th>
      <th scope="col">Remarks</th>
    </tr>
  </table>
</div>