使用div设置图像缩放，其子设置高度

Question

div本身就是它内容的高度。

我希望div包含两个子节点：另一个div（或左对齐的图像）和无序列表（ul）。内部div（或图像）将匹配父div的高度，父div高度将符合列表的高度（可包含任何合理数量的项目）。

我不确定如何设置父div的高度以匹配列表的高度，并使内部div与外部div的高度匹配。通过CSS正确完成。

我们很乐意接受替代解决方案，这只是我试图解决设计目标的一种方式。

Answer 1

Live Demo

• 在IE7 / IE8及最新版本的测试中使用：Firefox，Chrome，Safari，Opera。
• 图像的高度完全取决于ul。
的高度
• 要向IE7提供所需的额外规则height: 100%，我正在使用Star hack。如果您需要100％有效的CSS，则可以使用conditional comments或Star plus hack。

<强> CSS：

#iContainer {
    background: #ccc;
    overflow: hidden;
    position: relative
}
#iContainer div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    *height: 100% /* just for you, IE7 */
}
#iContainer img {
    height: 100%
}
#iContainer ul {
    float: right
}

<强> HTML：

<div id="iContainer">

    <div><img src="https://dummyimage.com/500x700/f0f/fff" /></div>

    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
        <li>list 5</li>
        <li>list 6</li>
        <li>list 7</li>
        <li>list 8</li>
    </ul>

</div>

The Big Pink Image：

Answer 2

这会做你想做的事吗？

http://jsfiddle.net/Mutant_Tractor/CQG8s/

它使用一个小的（纯JS）脚本来测量页面加载时的列表高度，然后通过.style.height方法动态设置div的高度：）

Answer 3

如果您希望div与其容器的高度相匹配，请将其高度设置为100％。如果您希望div占用尽可能多的空间，请将其高度设置为auto（默认值）。

所以，听起来你正在寻找的布局是

<style type="text/css">
 .scaledimage{height:100%;float:left}
 .list{float:left;}
</style>
<div class="container">
  <div class="scaledimage"></div>
  <div class="list"></div>
<div>