Как я могу растянуть пустой плавающий div на всю высоту, доступную с помощью css?

Question

Как я могу растянуть пустой плавающий div на всю высоту, доступную с помощью css?

У меня есть два плавающих дива рядом друг с другом, и я хочу, чтобы левый ДИВС растянулся до любого размера правого. Возможно ли это только с помощью css?

<div class="page">

    <div class="left-sidebar">

    </div>

    <div class="right-content">

    </div>

</div>



.left-sidebar

{

    background: url('ImageUrl') no-repeat right top #F8F1DB;

    float: left;

    width: 203px;

    min-height: 500px;

    height : auto;

}



.right-content

{

    background: #F8F1DB;

    margin-left: 203px;

    min-height: 477px;

}

В конечном итоге это выглядит так:



-------------------

|    |            |

|    |            |

|    |            |

|    |            |

|    |            |

-------------------

Левая боковая рамка имеет фоновое изображение и должна растягиваться на любую высоту кадра содержимого, однако у меня возникли проблемы с этим.

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

528 2

css css-float

2 ответов:

Comments

Ничего не найдено.

David Thomas · Accepted Answer · 2012-04-26 16:06:47

Лучшее, что я мог придумать, это использовать position: absolute на элементе .left-sidebar:
.page {
    position: relative; /* causes the left-sidebar to position relative to this element */
}

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;  /*  this line, and the one above, confer full-height */
    left: 0;
    width: 30%;
    background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}

.right-content {
    background-color: #f00; /* again, adjust to taste, was just to see where elements were rendered */
    margin: 0 0 0 35%; /* stops the sidebar showing 'above' the content, and gives a 5% gutter between */
}
JS Fiddle demo .

Отредактировано в ответ на комментарий ниже:

Есть заголовок и некоторое пространство по обе стороны от плавающих дивов, поэтому я не знаю фактические верхние/левые/нижние позиции для использования. Кроме того, если правая рамка содержимого растягивается дольше, левая рамка боковой панели не растягивается вместе с ней (добавьте высоту: 500 пикселей к правой рамке содержимого вашего играть на скрипке).

К сожалению, единственная альтернатива, которую я вижу, - это переместить элемент .left-sidebar в элемент .right-content, а затем выполнить следующие действия. Однако это может быть невозможно в вашем случае использования.
.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background-color: #f90;
}

.right-content {
    position: relative;
    background-color: #f00;
    margin: 0;
    padding: 0 0 0 35%;
}
JS Fiddle demo .

score 0 · Accepted Answer · 2012-04-26 15:54:11

Это довольно сложная проблема. Вот у вас есть статья об этом: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks