隐藏/显示<div> </div>时动态扩展表

Question

我目前正在通过Aria Templates框架使用Javascript开发一个Web应用程序，我想在隐藏/显示我的页面元素时动态扩展/缩小表格（如果可能的话，更好的是没有JS）。

这是一个可以更好地解释自己的小模式：

[网页架构]

如果用户隐藏了容器3，表2应该在这个新的空白区域中显示已经加载的行。 我的问题是：是否可以仅使用css / html属性执行此操作，还是应该使用JS实现它？

我应该补充一下，表的高度是从容器1和容器3之间的左侧空间计算的

按要求添加一些代码（由于它是Aria模板代码，因此不会被解释）：

Aria模板 - HTML代码：

<!-- Container 1-->
<div class = "widget_searchContainer" id = "widget_searchContainerId">
    <!--Some fields here -->
</div>

<!-- Table 2 -->
<!-- //Div displays header -->
<div class="header_background"> </div>  
<div class="innerTable"  id ="tableContainer"  style="height:${setTableHeight()}">  
    <div class="table-container">
                <table class="table">
        <thead style="max-width:100%;"> 
            <tr class="tableHeaderCells" id="tableHeader">

            <!-- Aria Templates for and code -->
            {foreach column in columns}
                <th  style="width:${column.width}; overflow:hidden">
                    <div class="th-inner">
                        <span>${column.name}</span>
                        <span class="sortIcons">
                            <!-- //{call filter("owner")/} -->
                            <!-- //{call sort("owner")/} -->
                        </span>
                    </div>
                </th>
            {/foreach}  

            </tr>
        </thead>
        {foreach row in rows}   
            <tr class = "highlightOnHover {if evenRow == 0}evenRow{else/}oddRow{/if} " style = "max-width:100%">
            {var rowValueIndex = 0 /}
            <!-- //displays each cell of the row -->
            {foreach value in rowValues}
                <td class="centeredCell" style="width:${columns[rowValueIndex].width}; overflow:hidden"> ${value} </td>
                {set rowValueIndex = rowValueIndex + 1 /}
            {/foreach}
        {/foreach}
        </tr>
     </table>
    </div>
</div>          

<!-- Container 3 -->
<div class="widget_hierarchyContainer" id = "widget_hierarchyContainerId">          

    <! -- //Allows to show/hide hierarchyContainer -->
    <div class="toRightBottom" style="margin-bottom:1em; margin-right:2em;">
        myButton
    </div>
</div>

与css文件相关联：

    /* Container 1 */
div.widget_searchContainer {
        background : ${c_grey4};
        position: relative;
        border : 1px solid blue;
        width : auto;
}
/* Table */
.table-container {
        padding-top: 30px;
        position: relative;
        width:100%;
    }

    .header_background{
        background: ${c_amadeus_blue};
        text-align: center;
            height: 30px;
            left: 0;
                position: absolute;
            right: 0;
            top: 0;
    }

    .innerTable{
        overflow-x: hidden;
        overflow-y: auto;
        width : 100%;
    }

    .th-inner {
            line-height: 30px;
            padding-left: 5px;
            position: absolute;
            text-align: center;
            top: 0;
    }
    .table {
        table-layout : fixed;
        border-collapse : separate;
        width : 100%;
    }

    /* Container 3*/
    div.widget_hierarchyContainer {
        background : ${c_grey4};
        border : 1px solid blue;
        width : 100%;
        position : absolute;
        bottom : 0px;
        height : 100px;
        overflow : auto;
    }