HTML/CSS-跨多个列的内部Div 100%高度？
我已经看了很多其他问题，但我认为我的问题有点不同，如果我错了，我很高兴看到链接并结束这个问题 你可以在这里看到我的问题： 第一个小节的右边框不是一直向下的——我需要它，否则它看起来相当时髦 我可以在jQuery中实现这一点，但我现在正在寻找一个纯HTML/CSS解决方案 这可能吗？如果是，怎么做HTML/CSS-跨多个列的内部Div 100%高度？,html,css,xhtml,Html,Css,Xhtml,我已经看了很多其他问题，但我认为我的问题有点不同，如果我错了，我很高兴看到链接并结束这个问题 你可以在这里看到我的问题： 第一个小节的右边框不是一直向下的——我需要它，否则它看起来相当时髦 我可以在jQuery中实现这一点，但我现在正在寻找一个纯HTML/CSS解决方案 这可能吗？如果是，怎么做 编辑 人造列不起作用，因为它需要背景图像。列数可以更改为1-5，因此边框必须反映这一点。很容易用CSS完成，但不需要背景图像。我知道这不是最好的解决方案，但也许人造列可能会有所帮助。请看这实际上是一
编辑
人造列不起作用，因为它需要背景图像。列数可以更改为1-5，因此边框必须反映这一点。很容易用CSS完成，但不需要背景图像。我知道这不是最好的解决方案，但也许人造列可能会有所帮助。请看这实际上是一个由来已久的问题，可能不是关于“所以”，而是关于CSS的。有几种方法可以做到这一点。一种是通过使用背景图像-这将是困难的，因为你有一个流体布局-如果你固定的列的宽度，你有问题，这将工作，或者你可以发送图像的位置使用一个百分比在这种情况下33% 两个可以在其他列的周围加上一个div，这样较短的列就占据了其他两个列的高度——这相当复杂
第三，不要担心，要充分利用它的特点。这方面的问题是，如果您为一列排序，突然“客户机”决定在另一列中需要较少的内容，那么您也会遇到问题。另一个选项可能是显示：表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>equal heights</title>
<style type="text/css">
#container
{
border:1px solid #000;
display:table;
}
#container div
{
display:table-cell;
width:200px;
border:1px solid red;
}
</style>
<body>
<div id="container">
<div>eins</div>
<div>zwei<br />zwei<br />zwei<br /></div>
<div>drei</div>
</div>
</body>
</html>
等高
#容器
{
边框：1px实心#000；
显示：表格；
}
#货柜组
{
显示：表格单元格；
宽度：200px；
边框：1px纯红；
}
埃因斯
zwei
zwei
zwei
德雷
不幸的是，有些浏览器不太支持它，请参见或我一直使用这种方法，它的效果非常好： 我在您的网站上使用Firebug并使用： .内容{ 填充底部：9999px 保证金底部：-9999px }
似乎能解决它。让我知道它是否适合您。在某些情况下，这是一个很好的解决方案，但如果您看到我的编辑，它将无法跨动态不同的列工作。这将是一个服务网站，内容将实时更改（无需刷新），这就是为什么我要寻找一个完全处理它的解决方案。到目前为止，这似乎是不可能的。HTML不能在每列的基础上更改——通过jQuery手动调整high更容易。谢谢你的建议！我认为这是一个很好的选择，尽管我们确实需要跨浏览器支持。另一件使这更复杂的事情是，它几乎是一个禅宗花园布局——它可以很容易地从水平排列到垂直排列（如果它们有5个以上的子部分）。这是一个有趣的想法/技巧——如何执行跨浏览器？它很容易出问题，这让我有点紧张