Question

我正在尝试使图像占据桌子的所有剩余宽度并跨越桌子的整个高度而不进一步扩展它，溢出：如果没有足够的高度则自动滚动。

宽度位很容易，但无论我做什么，包含图像的表格单元格都会扩展表格的高度。有没有办法防止这种情况，没有明确设置图像的高度？

Answer 1

到目前为止，我发现的解决方案在浏览器上有所不同，因此并不理想。您可以根据客户端呈现不同的标记。（但仍在寻找更普遍的答案。）

目前为止，针对最通用的解决方案再次更新：

<style>
    div.ImageBlock
    {
        height:100%;
        width:100%;
        left:0px;
        top:0px;
        overflow:auto;
    }
    div.IE_CompatMode
    {
        position:absolute;
    }
</style>

可以在Chrome中使用，并且当IE兼容模式为On时，必须添加IE_CompatMode。

<td rowspan="2" style="position:relative;">
    <div class="ImageBlock [conditional:]IE_CompatMode">
        <img src="Images/Jellyfish.jpg" style="position:absolute; top:0px; left:0px;" />
    </div>
</td>

没有（我还尝试过）在Firefox中运行。

Answer 2

您必须在内容周围使用包装元素来限制高度。

<table>
    <tr>
        <td><div class="overflow">This is short.</div></td>        
        <td><div class="overflow">This is longer.</div></td>   
        <td><div class="overflow">This is really long and repeated. This is really long and repeated.</div></td>           
    </tr>
</table>

.overflow {
    max-height:40px;
    overflow:hidden;
}

var tableHeight = $('table').height();
$('.overflow').css('height',tableHeight + 'px');

Answer 3

始终可以为图片指定百分比，例如height =“100％”，它应该使它成为它所在单元格的完整大小，但会限制溢出。

防止单元格扩大表格高度

3 个答案: