使两个浮动CSS元素具有相同的高度

本文介绍了使两个浮动CSS元素具有相同的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有两个元素，它们可以在高度上变化，并且彼此相邻。问题是，如果一个框高于另一个框，它看起来很丑。所以我想要他们是相同的高度。

我认为可能会工作的一种方法是将它们包装在容器div中，希望较高的一个调整其大小，较小的一个扩展以适应空间： p>

HTML ：

< div id =outerBox> < div class =innerBoxLeft>< / div> < div class =innerBoxRight>< br />< br />< br />< / div> < / div>

CSS：

.outerBox { width：100％; } .innerBoxLeft { float：left; width：45％; height：100％; } .innerBoxRight { float：right; width：45％; height：100％; }

无效。我相信这可能是因为外部div没有设置的高度，并且由于某种原因，较小的盒子和它的100％高度没有任何工作。我不能给它一个设定的高度，因为这将失败的点。

所以，除非有另一种方式，我想问我：如何设置一个子元素的高度为它的父级？

感谢

解决方案

为什么不使用表？

这太可笑了。用户想要查看表。 HTML语言提供了一个表元素来实现用户想要的目标。然而，我们使用一个完整的库（我查看JQuery的答案）来实现目标w / o一个表，即使它意味着一个脚本在客户端上运行！

I have two elements which can vary in heights and both floated next to each other. The problem is that it looks pretty ugly if one box is higher than the other. So I want them to be the same height.

One way I thought might work would be too to wrap them in a container div and hope the taller one resizes it and the smaller one expands to fit the space:

HTML:

<div id="outerBox"> <div class="innerBoxLeft"></div> <div class="innerBoxRight"><br /><br /><br /></div> </div>

CSS:

.outerBox { width: 100%; } .innerBoxLeft { float:left; width: 45%; height: 100%; } .innerBoxRight { float:right; width: 45%; height: 100%; }

Doesn't work. I believe this may be because the outer div doesn't have a set height and for some reason the smaller box and it's 100% height has nothing to work on. I cannot give it a set height however because that would defeat the point.

So unless there is a another way, I guess I am asking: How can I set a child element's height to that of it's parent?

Thanks

解决方案

Why don't you use a table?

This is getting ridiculous. User wants to see a table. HTML language provides a table element to achieve exactly the goal user wants. Yet, we use a whole library (I an looking at JQuery answer) to achieve the goal w/o a table even though it means a script running on client!