Question

我有一个（有时）非常长的表，后面有一个div，包含应该始终显示的控件。当表格超出容器时，表格需要滚动，无论您碰巧在表格中的哪个位置都可以看到控件。我无法将控件绝对定位到div的底部，因为表格并不总是很长。当表格很短时，控件应位于表格的底部。

值得注意的是，父容器实际上并不是一个完全固定的高度。它位于angularJS模板内，当调整浏览器窗口大小时，将重新计算高度并在div上设置。由于我的angularJS应用程序正在动态添加行，并且还有调整大小的可能性，因此使用javascript解决方案远远不够理想。我希望能用html / css和IE8兼容。

表格很短时：

---------- container -------------
---- short table ----
row...
row...
---------------------
controls
---------------------

whitespace

----------------------------------

表格很长时

：

---------- container -------------
-- long table w/scroll --
row...
row...
row...
row...
row...
row...
-------------------------
controls
---------- end container ---------

到目前为止，我设置了一个小提琴来测试这个： http://jsfiddle.net/m3qrmzn7/1/

HTML：

<div id="container">
    <div id="left">
        <div id="leftContent">
            <table>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
            </table>
        </div>
    </div>
    <div id="right">
        <div id="rightTableHead">
            barfoo..
        </div>
        <div id="rightScrollable">
            <table>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
                <tr><td>foobar</td></tr>
            </table>
        </div>
        <div id="rightTableFoot">
            barfoo..
        </div>
    </div>
</div>

的CSS：

#container {
    height: 250px;
    background-color: #333;
}
#left {
    margin-right: -100px;
    width: 100%;
    float: left;
    background-color: #999;
}
#leftContent {
    margin-right: 100px;
}
#right {
    width: 100px;
    float: right;
    background-color: #ccc;
    max-height: 100%;
    position: relative;
}
#rightTableHead,
#rightTableFoot {
    background-color: #ddd;
    height: 40px;
}
#rightScrollable {
    overflow-y: auto;
    max-height: 100%;
    position: relative;
}
#rightTableFoot {
    bottom: 0;
    width: 100%;
    position: absolute;
}

Answer 1

计算表格显示的行数和设定值，选择显示方式。

<?php
    $rows = request->rowCount();
?>
<span id="rows"> <?php echo $rows; ?> </span>

JS：

var x = document.getElementById("rows").innerHTML;
if(x < X)
{
    document.getElementById("controls").style.positionFixed = "bottom: 0px;";
}

浮动列中带有页眉和页脚的可滚动div

1 个答案: