Question

我需要在底部的<div>内放置一个固定高度（100px）和全宽（父<td>的100％）的<td>。 <td>可能高于浏览器视口高度，因为其他<td>的内容可能很大。

我已经尝试了一些像this (link)这样的解决方案，它实际上将div放在浏览器视口的底部。

修改这是一个不起作用的片段（根据上面的链接）：

td {
    position: relative;
}
div {
    position: absolute;
    bottom: 0;
}

有没有选项可以使用PHP，HTML，CSS或JavaScript（jQuery）将<div>修复到<td>的底部？

编辑3： 当我使用上面显示的解决方案时，发生的另一个问题是，如果我为div赋予属性“position：absolute;” “宽度：100％;”与视口宽度有关，而与td宽度无关。

编辑4： 我页面的实际代码：

html：

<tr>
    <td id="content">
    </td>
    <td class="sidebar">
        <div class="internal">Notice</div>
    </td>
</tr>

css：

#content{
    height: 1000px;
}
.sidebar{
    width: 10%;
    min-width: 200px;
    position: relative;
}

div.internal{
    position: absolute;
    bottom:0;
    width:100%;
    height: 100px;
}

jsFiddle：Source

Answer 1

这是 working example

使用此选项将div放在底部

td{
    position: absolute;
}

div{
    position: absolute;
    bottom: 0px;
}

<强>更新

这是您的代码 working link

的示例

它适用于Chrome和IE浏览器。红色部分是你的div。这是你想要的布局吗？

enter image description here

更新2

如果您想使用表格布局，可以尝试这样做： table layout

更新3：仅使用表格

如果之前的解决方案对您不起作用，我猜测您的代码不够模块化。如果要使用表，则可能只想使用表。在请求的单元格中添加另一个表格，如下所示： table inside the cell 。尽管我反对它，我仍然认为它比使用JS来解决你的问题更好。将来维护起来会更容易。

Answer 2

您需要使用以下内容：

<table>
    <tr>
        <td class="sidebar">
            <div class="internal">Notice</div>
        </td>
    </tr>
</table>

CSS：

.sidebar{
width: 10%;
min-width: 200px;
height: 1000px;
background-color: green;
}
div.internal{
    position: absolute;
    height: 100px;
    background-color: yellow;
}

使用Javascript：

$(document).ready(function () {
var $div = $('div.internal');
var $td = $div.closest('td');

$div.width($td.width() + 2);
$div.css('top', ($td.height() - $div.height() + 12) + 'px');
});

http://jsfiddle.net/Z58ZW/5/

Answer 3

尝试添加

div.myClass{
    position: absolute;
    bottom:0;
    width:100%;
}

到div。

div仅位于td底部的示例。

JSFiddle

如何在父td的底部定位div？

3 个答案: