动态填充表格单元格时如何将 div 定位在表格单元格的底部答案

【问题标题】：How to position a div at the bottom of a table-cell when the table cells are filled dynamically动态填充表格单元格时如何将 div 定位在表格单元格的底部
【发布时间】：2019-08-23 10:38:21
【问题描述】：

我想用下面的代码 sn-p 来证明我的问题：

.container {
  border: 2px solid blue;
}

.content {
  border: 2px solid red;
}

.footer {
  border: 2px solid green;
}

<table border="1" width="50%">
  <tr>

    <td class="container">

      <div class="content">
        <table border="1" width="100%">
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>

        </table>
      </div>

      <div class="footer">
        <table border="1" width="100%">
          <tr>
            <td>
              This is a footer
            </td>
          </tr>
        </table>
      </div>

    </td>

    <td class="container">

      <div class="content">

        <table border="1" width="100%">
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>
        </table>

      </div>

      <div class="footer">

        <table border="1" width="100%">
          <tr>
            <td>
              This is a footer
            </td>
          </tr>
        </table>

      </div>

    </td>

  </tr>

</table>

我有一个表格，其中的单元格（蓝色）被另一个表格（红色）和页脚（绿色）动态填充。红色表格可以包含可变数量的单元格。我想将绿色页脚放置在蓝色单元格的底部，但我不知道如何实现这一点。我无法让内容 div 达到相同的高度，因为它们的内容是可变的。我应该如何尝试解决这个问题？为这个非常基本的例子道歉。

问候

【问题讨论】：

您希望蓝色的位于底部，其余行居中？
你想用这个实际的表格数据来显示什么？如果没有，您首先不应该使用表格。 Flexbox 可以很容易地解决这样的问题。
我希望所有页脚都必须有相同的位置，在蓝色容器的底部。我尝试将红色 div 设置为 90% 的高度，将绿色页脚设置为 10% 的高度，但我似乎无法更改红色容器的高度。因为下一个单元格中的表格可能由于其内容而更高。
您应该重新考虑您的结构，然后使用表格（如果合适的话）或使用弹性或网格显示。将 HTML 变成标签汤，不是那么容易理解 ;)
我猜是表格数据。红色 div 内的所有表格单元格都应该可见。

标签： html css

【解决方案1】：

我不知道我是否明白你想要做什么，但我希望这会对你有所帮助

试试这个

    $('.container').each(function(e){
    	$(this).css({
      	    'height': $(this).height() + $(this).find('.footer').height() + 'px'
        })
    })

.container{
        border: 2px solid blue;
        position: relative;
    }
    
    .content{
        border: 2px solid red;
    }
    
    .footer{
        border: 2px solid green;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="50%">
  <tr>
  
    <td class="container">
     
      <div class="content">
        <table border="1" width="100%">
          <tr>
            <td >
              table cell
            </td>
          </tr>
          <tr>
            <td >
              table cell
            </td>
          </tr>

        </table>
      </div>
      
      <div class="footer">
        <table border="1" width="100%">
          <tr>
            <td >
              This is a footer
            </td>
          </tr>
        </table>
      </div>
        
    </td> 
  
      <td class="container">

        <div class="content">
        
          <table border="1" width="100%">
            <tr>
              <td>
                table cell
              </td>
            </tr>
            <tr>
              <td >
                table cell
              </td>
            </tr>
            <tr>
              <td >
                table cell
              </td>
            </tr>
             <tr>
              <td >
                table cell
              </td>
            </tr>
             <tr>
              <td >
                table cell
              </td>
            </tr>
          </table>
        
         </div>
         
         <div class="footer">

           <table border="1" width="100%">
             <tr>
               <td >
                 This is a footer
               </td>
             </tr>
           </table>
          
         </div>

      </td>
   
  </tr>
  
</table>

这是一种方法。还有更多“优雅”的方法，但你必须重新考虑你的结构。

【讨论】：