个人中心
gpt4 book ai didi

javascript - 如何根据 parent 的百分比设置需要百分比的表格高度？

转载 作者：太空宇宙 更新时间：2023-11-03 17:38:06 30 4
gpt4 key购买 nike

我有一个表格，我需要一个百分比。问题是 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/

30 4 0
文章推荐： c# - List inside 其他列表性能
文章推荐： python - 将列的子集转换为列表
文章推荐： c# - 将 Task 转换为 decimal
文章推荐： html - 每行显示不同数量的
    • 太空宇宙
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com