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

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;"; 
}