将垂直可调整大小的 Div 推到包装器的底部。如何？答案

【问题标题】：Push vertically resizable Div to bottom of wrapper. How?将垂直可调整大小的 Div 推到包装器的底部。如何？
【发布时间】：2009-06-17 08:43:47
【问题描述】：

首先，大家好。这个问题让我发疯，所以我希望有一个简单的解决方案

这里是an image of what I wanted originally。

但我不想使用 hacks 让 Box 1 和 (Box 2+Box 3) 相互扩展。所以我将只在包装上使用背景颜色，因此它们具有不同的高度并不明显。

这就是我现在拥有的：

CSS

#wrapper {
    background:         #000;
    width:              50%; 
    float:              left;
}

#box1 {
    background:         #FF0012;
    width:              65%;
    float:              left;
}

#box2 {
    background:         #141; 
    width:              35%;
    margin-left:        65%;    
}


#box3 {
    background:#AA1232;
    width:              35%;
    margin-left:        65%;
}

HTML

<body>

 <div id="wrapper">

  <div id="box1">

  </div>

  <div id="box2">

  </div>

  <div id="box3">

  </div>

 </div>

</body>

如果您想知道为什么我不在 Box 2 和 3 上使用 float: right;，因为如果 Box 1 低于 Box 2，那么 Box 3 将浮动在 Box 1 下方而不是 Box 2 下方。

问题： 1.将Box 3固定在包装纸的底部 2. 当在 Box 3 和 Box 2 中插入行时，它们不应溢出 - 而是扩展包装器高度（就像我发布的代码一样）

如果我在 Box 3 上使用 position: absolute; bottom: 0;，那么当插入行并且 Box 3 太高时，它将溢出 Box 2。

关于如何解决这个问题的任何想法？

【问题讨论】：

当您说可调整大小时，您的意思是用户可以调整它的大小，或者它会随着更多的文字变得更高？
文字越多，它就会变得越高。

标签： css html

【解决方案1】：

我知道它为什么会让你发疯——你正试图通过非桌面方式解决桌面问题。为什么？

我强迫自己认识到表格的功能：当我希望独立的内容片段共享一个共同的垂直和水平边缘时，这通常意味着我想要一个表格。

编辑：要使用表格实现这一点，您需要 1) 使用 rowspan 使框 1 跨越两行和 2) 垂直对齐框 3 的内容以确保它始终位于底部。

例如，请参阅说明行跨度的 HTML here。这几乎是您想要的，只需去掉表格边框并将 valign="bottom" 添加到第三个单元格。

【讨论】：

我喜欢远离桌子和旁边的人一样布局，但是这个问题的要求需要桌子。
好吧，作为我的新手，我以前没有使用表格来构建网站。使表做我想要的代码是什么样的？（使用 Box3 或表格单元格 3，当在表格单元格 1 或 2 中添加内容时，总是将其推向底部）
单元格 valign="bottom" 的 HTML 属性负责处理。
由于这不是表格数据，根据法律不应该使用表格，但是因为那些 CSS 人没有给我们提供一种轻松进行网格布局的方法，fsck ！使用一张桌子。（虽然我希望有人有更好的解决方案）
感谢大家的回答。使用我应该知道的表格是否有任何常见问题（因为每个人都非常讨厌它们）？例如。它会很好地验证吗？我可以在每个单元格中都有 DIV 吗？我可能遇到的其他问题？