Развернуть плавающий div?

Question

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

Answer 1

Here's a solution (inverted, right is fixed 200px) for you using position:absolute.

.

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

код выглядит следующим образом:

.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

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

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

Answer 3

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

Answer 4

Когда содержание «правой» DIV не имеет никакого специального разрыва выводимого содержимого (например, слишком длинный текст без пространства, или большое изображение) - просто удалить поплавок: правый

<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 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

Используйте "искусственные колонки": example.

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; 
}