浮动 DIV 和高度答案

【问题标题】：Floating DIVs and HEIGHT浮动 DIV 和高度
【发布时间】：2013-06-27 06:31:59
【问题描述】：

我希望 2 个具有不同内容和内容大小的 div 具有相同的高度。

它们漂浮在左侧；第一个有 80% 的宽度，另一个是 20% 的宽度。

<body>
    <div id="contenuto_body">
    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

    <p>Etiam vehicula, nisl at venenatis elementum, augue velit malesuada ipsum, id gravida massa enim ut leo.</p>

</div>

<div id="ads">
    <img src="http://data.whicdn.com/images/1676707/Happiness_is_only_real_when_shared-Christopher_McCandless-480x360-20100312_large.png"/>
</div>
</body>

【问题讨论】：

标签： html css css-float height

【解决方案1】：

考虑使用display: table-cell 而不是float。看例子：http://jsfiddle.net/26MGE/

【讨论】：

好吧，我试过了，它适用于高度...但是看看我的代码，
的开头和第一个
之间有间隙。代码 jsfiddle.net/9gp6J/5我不知道它可能是什么......
您可以使用vertical-align: top 为您的table-cells 将内容与顶部对齐。 jsfiddle.net/cangelis/fY9Gt

【解决方案2】：

您在div#ads 上将height 设置为100%，但它不知道100% 的高度...

如果您设置了body 高度，它将起作用，这是您的更新jsfiddle

【讨论】：

我无法在身体上使用 1000 像素（前缀高度）.. 有一天我的身体将是 1200 像素，另一天是 800 像素，高度也取决于设备；小屏幕需要更多像素来显示文档......最后这在响应式设计中不起作用

【解决方案3】：

使用 JQuery .outerHeight() 使两个对象的高度相同，但请确保您记得输入一个 ajax 文件。

这是一个有效的小提琴：

http://jsfiddle.net/9gp6J/8/

【讨论】：