HTML / CSS如何垂直拉伸DIV [重复]
Posted
技术标签:
【中文标题】HTML / CSS如何垂直拉伸DIV [重复]【英文标题】：HTML/CSS How to stretch a DIV vertically [duplicate] 【发布时间】：2013-04-24 19:08:46 【问题描述】：我正在使用 DIV 构建类似于表格的东西，并且我需要拉伸我的 DIV 以匹配其邻居的高度，以便正确显示我的背景颜色。
这是我的例子：
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Some title</title>
</head>
<body>
<div>
<div style="float:left; width: 49%; background-color: #ced6eb;">
Line1
<br/>
Line2
</div>
<div style="float:left; width: 49%; background-color: #dcddde; ">
Only one line here
</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="float:left; width: 49%; background-color: #ced6eb;">
Something else
</div>
<div style="float:left; width: 49%; background-color: #dcddde;">
Something else
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
我需要的是在右边的所有 3 行上都有灰色背景，而不是在中间有一个空白行。
这是我的 HTML 的简化版本。左上角的 DIV (line1, line2) 是可变长度的，所以像height:30px 这样的固定属性不是可接受的解决方案。
谢谢！
伊夫
【问题讨论】：
与其试图使 div 高度相等，不如以更简单的方式实现目标。只需将background-color 或#dcddde 添加到您的divs，级联顺序将处理其余部分。我无法发布答案，因为您的问题已被标记为重复，但在这里：codepen.io/Skibbereen-Coderdojo/pen/xgNPxo（我已删除内联样式，因为它对我来说太难处理了）
【参考方案1】：
您好，我建议您阅读equal height columns
这个问题已经在here和here讨论过
【讨论】：
以上是关于HTML / CSS如何垂直拉伸DIV [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何仅使用 CSS/HTML 拉伸/收缩任何尺寸的图像以最适合正方形？