Question

我有一张桌子，我需要一个百分比。问题是父母也是一个百分比。目前，该设置被忽略。关于如何让它发挥作用的任何想法？

我创建了一个fiddle。单击整个数字文本框旁边的按钮将展开标题。但桌子不合适。我无法对值进行硬编码，因为用户可以调整表单大小。关于如何解决这个问题的任何想法？

<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>

问题行已在此功能中标记： function 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%;
}

Answer 1

我将WholeNumberCell的ID更改为一个类，它对我来说很好用

表中包含Id为WholeNumberCell的所有元素都需要更改为WholeNumberCell类。 Id是唯一的，只能应用于一个元素，因为类可以应用于许多元素。

此外，任何CSS引用 #WholeNumberCell 现在应该是 .WholeNumberCell

＆＃39;＃＆＃39;适用于Ids，＆＃39;。＆＃39;适用于课程

Answer 2

终于明白了。

                    document.getElementById('WholeNumberList').style.height=document.getElementById('header').offsetHeight-60 + 'px';

Answer 3

另外一个解决方案是制作一个数学公式，根据表格中的行数计算标题的高度。以下是javascript代码的修改版本，它使用了这个技巧：

function toggleDropdown()
    {           
        var numRows = document.getElementById('WholeNumberTable').getElementsByTagName('tr').length;
        var headerHeight = (70*parseInt(numRows))/19.00;

        if (document.getElementById('header').style.height == '' || document.getElementById('header').style.height == "60px") 
            {
                document.getElementById('header').style.height=headerHeight+'%';
                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('WholeNumberList').style.width='156px' ;
                //document.getElementById('WholeNumberTable').style.height='calc(40% - 160px)' ;//Problem line
            }
        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";        
            }           
    }

我在公式中使用了70，因为根据行数，即19，在表中70％的标题高度似乎适合。休息是简单的数学。您还应该为div＆＃34; wholeNumberTable＆＃34;修改css。：

 #WholeNumberTable {
  /*height: 0;*/
  overflow: auto;
 }

无需明确设置div高度，此div的默认高度将等于：表格的高度+填充。

如何根据父亲的百分比设置需要百分比的表格的高度？

3 个答案: