Максимизировать плавающий div?

Question

Скажем, у меня есть 2 деления рядом: 1 поплавок влево, а другой поплавок вправо.Теперь скажите, что я установил размер левого плавающего элемента div, скажем, 200px.Как заставить правый плавающий div «максимизировать» себя или занять оставшуюся часть горизонтального пространства экрана (независимо от размера окна браузера?

Answer 1

Вот решение (инвертировано, право зафиксировано 200px) для вас с использованием позиции: абсолютное .

Вот решение, где левый фиксированный 200px .

Метод: вы в основном исправляете левую «боковую панель» и добавляете поле к правому гибкому столбцу, которое эквивалентно ширине боковой панели.

Код выглядит так:

.left {
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    background-color: #999;
}
.right {
    min-height: 100px;
    background-color: #666;
    margin-left: 200px; /* Same as left's width */
}​

Они оба работают в IE6 как есть.

Answer 2

Если у содержимого 'right' div нет специального всплывающего содержимого (например, слишком длинный текст без пробела или большое изображение) - просто удалите float: right

<div style="width:300px;border:red 1px solid">
    <div style="float:left;width:100px;border:1px solid green;">bla</div>
    <div style="border:1px solid black;">bla-bla</div>
</div>

Answer 3

Вы не можете, поскольку это не для плавающего элемента, чтобы соответствовать оставшемуся пространству. Если вы хотите, чтобы ваш правый плавающий div занимал все длительное пространство, вы должны оставить свойство float равным none и разрешить блокировке дисплея.

Answer 4

Используйте «искусственные столбцы»: пример .

HTML:

<div class="menu">
    menu<br />
    menu<br />
    menu
</div>
<div class="contents">
    contents<br />
    contents<br />
    contents<br />
    contents
</div>

CSS:

.menu {
    background: blue;
    color: yellow;
    width: 100px;
    float: left;
}
.contents {
    background: green;
    margin-left: 100px;
}

Если вам нужноиметь фон на всю высоту для «меню», а другой для «содержимого»:

1. Использовать фоновое изображение для контейнера, повторяя y и начиная с верхнего левого угла;
2. Это изображение должно иметь ширину "меню" и цвет фона меню;
3. И также использовать цвет в качестве фона, цвет, который вы хотите для фона контента.

Как это:

.container{
    background: top left yellow url(http://www.google.com/images/firefox/sprite2.png) repeat-y;
}

Answer 5

Как упоминал Рич Брэдшоу, вы можете использовать Javascript.Моя первая попытка (с использованием jQuery) будет

<script type="text/javascript">                                         
function resize_div() {
  $("#maxdiv").width($("#maxdiv").parent().outerWidth()-200);
}
$(document).ready(function() {
  resize_div();
});
$(window).resize(function() {
  resize_div();
});
</script>

Answer 6

Не думаю, что есть хороший способ сделать это без использования JavaScript (или гибкой блочной модели, которая не поддерживается в IE).

Я бы просто нашел ширину области просмотра,затем уберите 220, затем установите ширину.Используя jQuery, он будет единственным.