我有两个监视器。一个是24〃；另一个是我笔记本电脑的显示器(12.5英寸(；div"；(红框(在我的网络应用程序中可以在大显示器上全高显示，但在我的小显示器上只是它的一部分。
我的问题是为什么它在不同尺寸的显示器上显示不同？因为我的css中所有的高度设置都是百分比，并且我从未使用绝对数字作为高度。为什么红框(div id是"scrollTable"(在不同大小的监视器上显示不同？因为这个问题，动态表在这个"div"；即使div滚动到底部，也无法完全显示。动态表的行数取决于用户的搜索结果，可能只有1或2行，有时可能超过30或40行。请参阅下面的css和html。谢谢你的帮助。
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
header {
height: 6%;
margin: 0px;
padding: 0.2px;
padding-left: 6px;
text-align: left;
vertical-align: central;
background: #8a1841;
color: papayawhip;
display: block;
}
#nsmap {
float: left;
left: 0;
width: 80%;
bottom: 0;
height: 94%;
}
#searchPanel {
padding: 3px;
float: right;
height: 94%;
width: 20%
}
#HomeButton {
position: absolute;
top: 135px;
left: 20px;
z-index: 50;
}
label {
font-size: 10px;
font-weight: bold;
text-align: center;
}
table.imagetable {}
table.imagetable tr td {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
table.imagetable th {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
table.imagetable tr:nth-child(even) {
background-color: #92c8da;
}
table.imagetable tbody tr:hover {
background-color: #EBECCD;
}
.cboWidth {
border: 1px solid #000000;
width: 100%;
}
.ccTable1 {
height: 77%;
}
#scrollTable {
border: 2px solid red;
max-height: 80%;
min-height: 80%;
width: 100%;
overflow-y: auto;
overflow-x: auto;
}
#StreetKey {
width: 100%;
}
.thirty {
width: 30%;
}
.twenty {
width: 20%;
}
.fifteen {
width: 15%;
}
thead {
visibility: visible;
}
.dijitButtonNode {
width: 160px;
height: 25px;
text-align: left;
font-size: 16px;
border: hidden;
}
.dijitButtonNode:hover {
font-weight: bold;
}
.center {
display: block;
margin-left: 52%;
width: 45%;
}
#tbPrint {
border: 0px;
padding: 8px;
min-width: 350px;
max-width: 350px;
}
.tdPrint {
border: 0px;
text-align: left;
padding: 0px;
font-size: 10px;
max-width: 140px;
min-width: 140px;
}
#trPrint {
background-color: white;
}<!DOCTYPE html>
<html>
<head></head>
<body>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title> Online Map Book </title>
<header>
<h4>Online Map Guide Book</h4>
</header>
<div id="nsmap" style="background-color:whitesmoke">
</div>
<div id="searchPanel">
<form action="/action_page.php">
<label style="font-weight:bold;font-size:12.5px">Select Electoral District:</label> <br>
<select id="EDNum" name="EDNum" class="cboWidth"></select>
<br><br>
<label style="font-weight:bold;font-size:12.5px">
Select Polling Division: </label><br>
<select id="PDNum" name="PDNum" style="border:1px solid #000000"></select>
<br><br>
<div class="dropdown" style="width:100px">
<table id="tbPrint">
<tr>
<td><label style="font-size:12.5px">Print map or street key:</label></td>
</tr>
<tr id="trPrint">
<td class="tdPrint">
<button id="btnPrintGroup" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" disabled>
Print
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<div id="btnPrint"></div>
</li>
<li>
<div>
<div class="dijitButtonNode" id="btnStKey" onclick="printStKey()" style="margin-left:10px">
Street Key
</div>
</div>
</li>
</ul>
</td>
</tr>
</table>
</div>
</form>
<hr>
<div id="StreetKey" class="ccTable1">
<div style="font-size:14px; font-weight:bold"> Street Key </div>
<div id="scrollTable">
<table id="streetTable" class="imagetable " style="cursor: pointer;">
<colgroup>
<col class="thirty" />
<col class="twenty" />
<col class="fifteen" />
<col class="fifteen" />
<col class="twenty" />
</colgroup>
<thead>
<tr>
<th>Street</th>
<th>Town</th>
<th>Low No.</th>
<th>High No.</th>
<th>Order</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
</html>当您使用100%时，意味着您获得div父级的全部高度。如果要始终在视口中显示div，请尝试使用以下单位：vh它们的意思是：视口高度，所以如果设置height:100vh，则无论屏幕是什么，div都将始终适合视口。：(
https://css-tricks.com/fun-viewport-units/