Html 显示表格单元格高度100%对齐图像底部

我正在使用

表格

布局，并试图将

表格单元格

的子单元格的高度设置为其容器的100%。为什么不会发生这种情况？您如何解决

我还尝试将表格单元格高度设置为100%，但没有成功

我只想将图像与容器底部对齐。如何在表格显示中执行此操作

每个表格单元格中的文本量是动态的

---

Fiddle:

您似乎试图创建一个3列、2行的表，但为了保持标记的语义，只使用单行。如果没有flexbox，将图像分发到底部将需要一些CSS技巧

下面是一个例子，它应该符合您的要求：（1）跨浏览器，包括IE，兼容性（2）允许框中的任意文本：

*{
填充：0；
保证金：0；
}
#容器{
宽度：500px；
保证金：0自动；
}
保险商实验室{
列表样式类型：无；
显示：内联表；
}
李{
位置：相对位置；
/*图像宽度/（图像高度*列计数）*/
垫底：11.764705882%；
显示：表格单元格；
背景：红色；
/*100/列计数*/
宽度：33.333%；
}
a{
颜色：白色；
}
img{
宽度：100%；
位置：绝对位置；
底部：0；
}

我正在使用表格布局并尝试设置孩子的高度

表单元格的

为其容器的100%。为什么不发生这种情况 你如何解决这个问题

我还尝试将

表格单元格的高度设置为100%，但没有成功

在CSS中使用百分比高度时，需要指定所有父元素的高度，包括
body
和根元素（
html
）

根据规范：


百分比
指定百分比高度。百分比是根据生成的长方体形状的高度计算的
包含块。如果包含块的高度不是
显式指定，并且此元素不是绝对定位的，则该值计算为“auto”

自动
高度取决于其他属性的值

换句话说，如果没有为包含块设置明确的高度（并且子元素不是绝对定位的），则具有百分比高度的子元素将没有参照系

因此，代码中的问题可以归结为：在父母
ul
、
#container
、
body
和
html
上缺少一个
高度

演示：

我只想将图像与容器底部对齐。如何在表格显示中执行此操作

虽然非常适合对齐表格单元格中的元素，但在这种特殊情况下，因为每个图像都有一个不能移动的同级，所以
垂直对齐
属性没有用处

但是图像可以通过绝对定位进行移动。试试这个：

li{
    display: table-cell;
    background: red;
    height: 100%;
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
    width: 33.33%; /* new */    
}

img{
    width: 100%;
    position: absolute; /* new */
    bottom: 0; /* new */
}

演示：

注:


不改变原始加价
作为记录，这个问题可以很容易地解决，但我知道这不是一个选项，因为需要IE 8&9浏览器支持
我希望我正确地理解了这个问题，但我的建议是让每个锚
显示：表格单元格
，以便它们被强制到相同的高度，然后您可以将所有元素放置在锚内，甚至使用背景图像而不是

您只需为所有元素设置一个高度，例如

*{
    height: 50px;
}

您将获得所需的结果：

如果文本量将成为一个问题，您可以为
.header
类设置
溢出：auto
。
您的代码和显示属性（如“表格”和“表格单元格”）都是正确的

但是，问题是表仅以自动高度呈现。因此，即使设置了容器高度，表结构的渲染高度也不正确。因此，除了容器类之外，还要为“ul”设置高度
关于图像的位置，您可以将边距顶部设置为100%，或者通过计算图像的大小，并将其从500px容器高度减小，来帮助您定位
希望这能回答您的所有疑问

编辑当设置边距时，可以扩展表格高度，也可以使用css属性，如下所示

transform: translateY(Y);
transform-origin: left top;

在这种情况下，我认为最好根据img来控制单元格的高度，因为它是静态的，并且将header设置为绝对值

诸如此类：

li{
    position: relative;
    display: table-cell;
    background: red;
    height: 100%;
    vertical-align: bottom;
}



.header{
    width: 100%;
    position: absolute;
    display: block;
    color: white;
    background: blue;
}

您的示例不包含表。他在CSS中使用表。我们可以使用flex吗？因为使用FlexBox将一个孩子与顶部对齐，另一个孩子与底部对齐是小菜一碟。@woestijnrog尽管我非常喜欢使用FlexBox，但我需要支持IE8和IE9:）
div{min height:2.5em；}
但这是脏的：）。。。但肯定是交叉浏览器，这是我见过的最黑的解决方案。当然可以，但那是
图像宽度/（图像高度*列计数）
计算。。哎哟如果图像有不同的高度会很糟糕，是吗？