Растянуть блок на оставшееся пространство

[Siend]

ОТПАД!!!! Спасибо огромное! Правда я так и не понял суть этой хитрости. Каким образом overflow в одном месте и отсутствие онного в другом позволяет добиться этого эффекта? Можете пояснить?)

[Siend]

overflow формирует новый контекст. Далее цитата:

Элементы из разных блочных контекстов форматирования никак не могут повлиять на положение друг друга на странице.

То есть по сути элементы не должны видеть друг друга, т.е. вести себя как при position:absolute;
В чем я ошибаюсь? (а я ошибаюсь, это очевидно)

[Siend]

Ещё крайне интересно то, что блоки растягиваются на 100% хотя этого свойства мы не указывали, и ели его указать, то весь эффект исчезнет и блоки сместятся вниз.

[mikhail.golovkin]

То есть по сути элементы не должны видеть друг друга, т.е. вести себя как при position:absolute;
В чем я ошибаюсь? (а я ошибаюсь, это очевидно)

Тут речь идёт об элементах внутри контекста, т.е. внутри каждого из блока с одим из свойств, создающих контекст.
Может быть, спецификация прояснит лучше.
http://www.w3.org/TR/CSS21/visuren.h...ock-formatting

Вольный перевод:

9.4.1 Блочные контексты форматирования.

Плавающие блоки, абсолютно позиционированные элементы, блочные контейнеры (такие, как inline-block, table-cells и table-captions) не являющиеся блочными элементами, и блочные элементы с 'overflow' отличным от 'visible' (за исключением случаев, когда значение наследуется от viewport) устанавливают новые блочные контексты для их содержимого.

В блочном контексте форматирования блоки располагаются вертикально один за другим от верха родительского блока. Вертикальное расстояние между двумя соседними блоками определяется свойствами 'margin'. Вертикальные отступы между соседними блоками объединяются.

В блочном контексте форматирования каждый левый край блока касается левого края родительского блока (для выравнивания справа налево касается правым). Это верно даже в присутствии плавающего блока (при этом строчные элементы могут обтекать плавающий блок), если только блок не устанавливает новый контекст (в этом случае сам блок может обтекать плавающий блок).

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

[ksa]

mikhail.golovkin, столько теории... Тестовый пример от тебя будет? А то прям заинтриговал.

[EmperioAf]

mikhail.golovkin, столько теории... Тестовый пример от тебя будет? А то прям заинтриговал.

так вот же был:

<iframe width="800" height="550" src="http://embed.plnkr.co/9RbRhrsnm85UabW7rW1G/preview" frameborder="0" allowfullscreen></iframe>

этот overflow:auto каким то магическим способом, но работает

[ksa]

Теперь понял как та фигня работает.

[ksa]

этот overflow:auto каким то магическим способом, но работает

Второй раз меня удивляет этот overflow.
Сколько скрытого подтекста за сухими определениями его значений

hidden - Отображается только область внутри элемента, остальное будет скрыто.
auto - Полосы прокрутки добавляются только при необходимости.

http://htmlbook.ru/css/overflow

[Siend]

mikhail.golovkin, а подскажите пожалуйста, в такой ситуации:

.block1{
overflow:auto;
}

.block2{
overflow:auto;
}

.block3{
overflow:auto;
}

Эти три блока будут обладать каждый собственным контекстом, или у всех он будет один? Т.е. разный контекст задать можно исключительно разными свойствами (например одному блоку float, а другому overflow) или даже одно свойство будет автоматически создавать новый контекст. Или перефразирую: Будет ли контекст блоков с одинаковыми свойствами объединяться?

P.S.: звучит наверное отвратительно, но по другому мысль сформулировать не смог(

[ksa]

Эти три блока будут обладать каждый собственным контекстом, или у всех он будет один?

Разный у всех.
Ведь

Блочный контекст форматирования может быть создан посредством:
- корневого элемента или чего-то, что содержит его
- поплавками (элементы, у которых float не равно none)
- абсолютно позиционированными элементами (элементами, значение position которых либо absolute, либо fixed)
- inline-blocks (элементы с display: inline-block)
- ячейки таблицы (элементы с display: table-cell, установленного по умолчанию для ячеек таблицы)
- заголовки таблицы (элементы с display: table-caption, установленного по умолчанию для ячеек таблицы)
- элементы, у которых значение свойства overflow отличается от visible
- flex блоки(элементы с display: flex или inline-flex)

https://developer.mozilla.org/ru/doc...atting_context
Т.е. если ты у элемента указал хоть одно из 8-ми - значит создал "Блочный контекст"...

Элементы конечно могут быть и вложенными друг в друга... Но в каждом будет создан новый "Блочный контекст".