我有一个表格，我需要一个百分比。问题是 parent 也是一个百分比。目前该设置被忽略。关于如何让它发挥作用的任何想法？
我创建了一个 fiddle .单击整数文本框旁边的按钮将展开标题。但是 table 放不下。我无法对值进行硬编码，因为用户可以调整表单的大小。关于如何解决此问题的任何想法？
<body>
<header id='header'>
<br>
<form id='reload' name="Actions" action="Viewer.php" method="post">
<div id='WholeNumberSection'>
Whole Number
<input type="hidden" id='Print' name="Print">
<input type="text" id='WholeNumber'>
<input type="button" onclick="toggleDropdown()"/>
<div id="WholeNumberTable"><Table id="WholeNumberList" cellspacing="0" cellpadding="1" border="2">
<TR><TD class='WholeNumberCell'>SS9230</TD><TD class='WholeNumberCell'></TD></TR>
<TR><TD class='WholeNumberCell'>BAC5009</TD><TD class='WholeNumberCell'>J</TD></TR>
<TR><TD class='WholeNumberCell'>S6112-23025</TD><TD class='WholeNumberCell'>AE</TD></TR>
<TR><TD class='WholeNumberCell'>SER-65109</TD><TD class='WholeNumberCell'>B</TD></TR>
<TR><TD class='WholeNumberCell'>SS8640</TD><TD class='WholeNumberCell'>17</TD></TR>
<TR><TD class='WholeNumberCell'>S6132-61009</TD><TD class='WholeNumberCell'>D</TD></TR>
<TR><TD class='WholeNumberCell'>SS8618</TD><TD class='WholeNumberCell'>4</TD></TR>
<TR><TD class='WholeNumberCell'>70553-01108</TD><TD class='WholeNumberCell'>J</TD></TR>
<TR><TD class='WholeNumberCell'>SS8630</TD><TD class='WholeNumberCell'>20</TD></TR>
<TR><TD class='WholeNumberCell'>S6110-26102</TD><TD class='WholeNumberCell'>W</TD></TR>
<TR><TD class='WholeNumberCell'>65652-11146</TD><TD class='WholeNumberCell'>S</TD></TR>
<TR><TD class='WholeNumberCell'>SS9999</TD><TD class='WholeNumberCell'>62</TD></TR>
<TR><TD class='WholeNumberCell'>SS9208</TD><TD class='WholeNumberCell'>30</TD></TR>
<TR><TD class='WholeNumberCell'>SS9208</TD><TD class='WholeNumberCell'>43</TD></TR>
<TR><TD class='WholeNumberCell'>HP1-1</TD><TD class='WholeNumberCell'>R</TD></TR>
<TR><TD class='WholeNumberCell'>SS8805</TD><TD class='WholeNumberCell'>6</TD></TR>
<TR><TD class='WholeNumberCell'>70216-01007</TD><TD class='WholeNumberCell'>AB</TD></TR>
<TR><TD class='WholeNumberCell'>SS8486</TD><TD class='WholeNumberCell'>11</TD></TR>
<TR><TD class='WholeNumberCell'>70009-02001</TD><TD class='WholeNumberCell'>M</TD></TR></Table></div>
</div>
</form>
</header>
<div id="sidebar">
</div>
<div id="content">
</div>
<footer>
<br>
</footer>
</body>
</html>
问题行已经在这个函数中标出: 函数 toggleDropdown() {
if (document.getElementById('header').style.height == '' || document.getElementById('header').style.height == "60px")
{
document.getElementById('header').style.height='60%';
document.getElementById('sidebar').style.top='60%';
document.getElementById('sidebar').style.height='calc(40% - 60px)';
document.getElementById('content').style.top='60%';
document.getElementById('content').style.height='calc(40% - 60px)';
document.getElementById('WholeNumberList').style.display = "block";
document.getElementById('WholeNumberTable').style.width='256px' ;
//Problem line
document.getElementById('WholeNumberTable').style.height='calc(40% - 260px)' ;
}
else
{
document.getElementById('header').style.height='60px';
document.getElementById('sidebar').style.top='60px';
document.getElementById('sidebar').style.height='calc(100% - 120px)';
document.getElementById('content').style.top='60px';
document.getElementById('content').style.height='calc(100% - 120px)';
document.getElementById('WholeNumberList').style.display = "none"; }
}
这是CSS
html, body {
height: 100%;
margin: 0;
width: 100%
}
header {
width: 100%;
height: 60px;
background-color: #013499;
margin: 0;
}
#sidebar {
background-color: #7690C5;
bottom: 60px;
float: left;
height: calc(100% - 120px);
top: 60px;
width: 200px;
}
#content {
background-color: #F2F2F2;
bottom: 60px;
float: left;
height: calc(100% - 120px);
overflow: auto;
top: 60px;
width: calc(100% - 200px);
}
footer {
clear: both;
margin: -60px 0 0 0;
width: 100%;
height: 60px;
background-color: #013499;
}
#buttons {
margin-right: 20px;
text-align: right;
}
#dropDownButton {
vertical-align: -5px;
}
#ImgeDataTable {
border-spacing: 0;
padding: 0;
height: 100%;
}
#WholeNumber {
width: 135px;
}
#WholeNumberSection {
color: white;
margin-left: 220px;
}
#WholeNumberList {
color: white;
display: none;
height: inherit;
margin-left: 100px;
}
.WholeNumberCell {
color: #000000;
}
#WholeNumberTable {
height: 0;
overflow: auto;
}
.send_button {
margin-right: 20px;
text-align: right;
}
.small {
width: 50px;
}
.medium {
width: 200px;
}
.large {
width: 400px;
}
.scrollingTable {
height: 100%;
width: 100%;
}
最佳答案
我把你的 WholeNumberCell 的 ID 改成了一个类，对我来说效果很好
表中 Id 为 WholeNumberCell 的所有元素都需要更改为 WholeNumberCell 类。一个 Id 是唯一的，只能应用于一个元素，而作为一个类可以应用于多个元素。
此外，任何 CSS 引用 #WholeNumberCell 现在应该是 .WholeNumberCell
'#' 代表 ID，'.'是类的
关于javascript - 如何根据 parent 的百分比设置需要百分比的表格高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29525149/