我想用下面的代码片段来演示我的问题:
.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>
我有一个表格,其中的单元格(蓝色)动态填充了另一个表格(红色)和一个页脚(绿色)。红色表格可以包含可变数量的单元格。我想将绿色页脚放在蓝色单元格的底部,但我不知道如何做到这一点。我无法将 content-div 设置到相同的高度,因为它们的内容是可变的。我应该如何尝试解决这个问题?为这个非常基本的例子道歉。
问候
最佳答案
我不知道我是否明白你想要做什么,但我希望这对你有帮助
试试这个
$('.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>
这是实现此目的的一种方式。有更多“优雅”的方法,但您将不得不重新考虑您的结构。
关于html - 动态填充表格单元格时如何将 div 定位在表格单元格的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57624594/