Масштабирование изображения с помощью div, чей ребенок устанавливает высоту

Question

Div, сам по себе, является высотой его содержимого.

Я хочу, чтобы div включал двух дочерних элементов: еще один div (или изображение с выравниванием по левому краю) и неупорядоченный список (ul).Внутренний div (или изображение) будет соответствовать высоте родительского div, высота родительского div будет соответствовать высоте списка (который может содержать любое разумное количество элементов).

Я не уверен, какустановите высоту родительского div, чтобы соответствовать высоте списка, и чтобы внутренний div соответствовал высоте внешнего div.Сделано правильно с помощью CSS.

Альтернативные решения с радостью приняты, это только один способ, которым я пытаюсь достичь своих целей в дизайне.

Answer 1

Демонстрационная версия

• Протестировано в IE7 / IE8 и последних версиях: Firefox, Chrome, Safari, Opera.
• Высота изображения полностью зависит от высоты ul.
• Для подачи в IE7 необходимого дополнительного правила height: 100%, я использую Starхак .Вы можете использовать условные комментарии или Звезда плюс хак вместо этого, если вам нужен 100% действительный CSS.

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>

Большое розовое изображение:

Answer 2

Это делает то, что вы после?

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

Он использует небольшой (чистый JS) скрипт для измерения высоты списка при загрузке страницы, а затем динамически устанавливает высоту div с помощью метода .style.height:)

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>