我如何强制浮动DIV匹配另一个浮动DIV的高度？ [英] How might I force a floating DIV to match the height of another floating DIV?

问题描述

我的HTML代码只是将页面分为两列，分别为65％，35％。

 < div style =float：left; width：65％; height：auto; background-color：＃FDD017;> 
< div id =response> 
< / div> 
< / div> 
< div style =float：left; width：35％; height：auto; background-color：＃FDD017;> 
< div id =note> 
< / div> 
< / div> 
  

在响应 div ，我有可变数据;在注意 div 中，我有固定的数据。
即使两个 div 有两组不同的数据，我需要它们以相同的高度显示，以使背景颜色显示为填充一个包含都。当然，问题是 response div ，因为它的高度根据当前在其中显示的数据量而变化。

如何确保两列的高度总是相等？

解决方案

将它们包含在包含应用背景颜色的div中，并在columns后面有一个清除div。

 < div style =background-color：yellow;> 
< div style =float：left; width：65％;> column a< / div> 
< div style =float：right; width：35％;> column b< / div> 
< div style =clear：both;>< / div> 
< / div> 
  

---

更新了一些评论和我自己的想法：

这种方法起作用，因为它本质上简化了你的问题，在这个有点'oldskool'的方法中，我把两列放在一个空的清除元素之后，清除元素是告诉父级（具有背景）这是浮动行为结束的地方，这允许父级基本上在清除的位置渲染高度的0像素，这将是任何最高的先前浮动元素。 p>

这样做的原因是为了确保父元素与最高的列一样高，然后在父级上设置背景，以使两个列具有相同的高度。

应该注意的是，这种技术是oldskool，因为更好的选择是触发这种高度计算行为，例如 clearfix 或只需在父元素上有overflow：hidden。

虽然这在有限的情况下工作，如果你希望每一列看起来在视觉上不同，或者在它们之间有一个差距，那么在父元素上设置背景将无法工作，但是有一个技巧来获得这个效果。

诀窍是将底部填充添加到所有列，到最大大小，你希望可以是最短和最高列之间的差异，如果你可以'然后选择一个大的数字，那么你需要添加一个相同数字的负底部边距。

你需要在父对象上隐藏overflow，但结果将是每个列将请求渲染由边距建议的这个额外的高度，但实际上不请求该尺寸的布局（因为负边界计数器计算）。

这将使父对象以最高列的尺寸渲染，同时允许所有列在其高度+所使用的底部填充尺寸上渲染，如果此高度为

 < div style =overflow：hidden;> 
< div style =background：blue; float：left; width：65％; padding-bottom：500px; margin-bottom：-500px;> column a< br /> column a< div> 
< div style =background：red; float：right; width：35％; padding-bottom：500px; margin-bottom：-500px;> column b< / div& 
< / div> 
  

您可以在 bowers and wilkins website （see the four horizo​​ntal spotlight images the bottom of the page）。

My HTML code is just dividing the pages into two columns, 65%,35% respectively.

<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
   <div id="response">
   </div> 
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
   <div id="note">
   </div>
</div> 

In the response div, I have variable data; in the note div, I have fixed data. Even though the two divs have two different sets of data, I need them to display with the same height so that the background colors appear to fill a box containing both. Naturally, the problem is the response div, as its height varies depending on the amount of data currently being displayed within it.

How might I ensure that the height of the two columns are always equal?

解决方案

Wrap them in a containing div with the background color applied to it, and have a clearing div after the 'columns'.

<div style="background-color: yellow;">
  <div style="float: left;width: 65%;">column a</div>
  <div style="float: right;width: 35%;">column b</div>
  <div style="clear: both;"></div>
</div>

---

Updated to address some comments and my own thoughts:

This method works because its essentially a simplification of your problem, in this somewhat 'oldskool' method I put two columns in followed by an empty clearing element, the job of the clearing element is to tell the parent (with the background) this is where floating behaviour ends, this allows the parent to essentially render 0 pixels of height at the position of the clear, which will be whatever the highest priorly floating element is.

The reason for this is to ensure the parent element is as tall as the tallest column, the background is then set on the parent to give the appearance that both columns have the same height.

It should be noted that this technique is 'oldskool' because the better choice is to trigger this height calculation behaviour with something like clearfix or by simply having overflow: hidden on the parent element.

Whilst this works in this limited scenario, if you wish for each column to look visually different, or have a gap between them, then setting a background on the parent element won't work, there is however a trick to get this effect.

The trick is to add bottom padding to all columns, to the max amount of size you expect that could be the difference between the shortest and tallest column, if you can't work this out then pick a large figure, you then need to add a negative bottom margin of the same number.

You'll need overflow hidden on the parent object, but the result will be that each column will request to render this additional height suggested by the margin, but not actually request layout of that size (because the negative margin counters the calculation).

This will render the parent at the size of the tallest column, whilst allowing all the columns to render at their height + the size of bottom padding used, if this height is larger than the parent then the rest will simply clip off.

<div style="overflow: hidden;">
  <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
  <div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>

You can see an example of this technique on the bowers and wilkins website (see the four horizontal spotlight images the bottom of the page).

这篇关于我如何强制浮动DIV匹配另一个浮动DIV的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！