我遇到了这个问题的麻烦。这很简单：
HTML：
<div>
<section class="left">
</section>
<section class="right">
</section>
<div class="clear"></div>
</div>
CSS：
div, section { border: 1px solid #000; }
.left { height: 100%; width: 200px; float: left; height: 200px; }
.right { width: 300px; float: right; height: 300px; }
.clear { clear: both; }
Fiddler：http://jsfiddle.net/H2c6g/
我有这两个部分，我需要两个部分使用100％的可用高度。我对这两部分有一个恐怖的内容。有时右边较大，有时左边。放一个高度只是为了解释，但在我的实例中，并没有这个固定的高度。
全力以赴。
答案 0 :(得分：1)
如果你不知道孩子和父母的高度，那么就不可能使用相同的高度（因为height = 100%意味着具有固定高度的下一个祖先的完整高度）。但是，有一些技巧。
来自css-tricks的相同高度的几种解决方案：
codepen中的一个工作示例：
如果你不介意使用javascript，也可以使用css-tricks：
还有一些代码，css-tricks的第一个例子。你有你的HTML：
<div class="five-columns group">
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>
和CSS。在这里，您只需创建一个垂直背景，使似乎就像100％高度列一样，即使没有。
.five-columns {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #eee),
color-stop(20%, #eee),
color-stop(20%, #ccc),
color-stop(40%, #ccc),
color-stop(40%, #eee),
color-stop(60%, #eee),
color-stop(60%, #ccc),
color-stop(80%, #ccc),
color-stop(80%, #eee),
color-stop(100%, #eee)
);
background-image: -webkit-linear-gradient(
left,
#eee,
#eee 20%,
#ccc 20%,
#ccc 40%,
#eee 40%,
#eee 60%,
#ccc 60%,
#ccc 80%,
#eee 80%,
#eee 100%
);
/* Other vendors here */
}
答案 1 :(得分：0)
您可以使用包含动态内容的div的min-height，而不是使用固定高度。 这样div就会占据您指定的最小高度，但会占用内容的长度。
div, section { border: 1px solid #000; height:100%;}
.left { min-height: 300px; width: 200px; float: left; height: 200px; }
.right { width: 300px; float: right; min-height: 300px; }
.clear { clear: both; }
这样你的部分将占据100％的高度，但是内部的div将至少需要300px的高度，但是当内容较大时，高度会自动调整。
祝你好运
答案 2 :(得分：0)
您可以使两个部分的高度均为包含div的50％。这将使他们两个都相同。
答案 3 :(得分：0)
您需要做的就是将 100％的高度添加到 html 和正文标记以解决此问题
html, body {
height: 100%;
}
div, section { border: 1px solid #000; height: 100%;}
.left { height: 100%; min-height: 100%; width: 200px; float: left;}
.right { width: 300px; float: right; height: 100%; }
删除clear:both属性，而不会在其溢出时将atomatic wrap写入next。
另一种方法也可以设置 div 元素高度：100％; 轻松设置动态 * 身高 * 都是div ，
div{
height:100%;
}
这对你有什么帮助！
答案 4 :(得分：0)
其中一个选项是使用display: table-cell来实现此目的：
<div class="wrapper">
<section class="left"> ... </section>
<section class="right"> ... </section>
</div>
CSS：
.wrapper {
display: table;
}
.wrapper section {
display: table-cell;
}
.left {
width: 200px;
height: 200px;
}
.right {
width: 300px;
}
行中的单元格总是尝试调整高度以符合最高的单元格。