Igor Schnaider

Да, вниз конечно, я перепутал. Но вверху свободное пространство, он обратно поднялся. Блин, нет, все-таки вниз :-) Примерно так. Половина высоты буквы x. У этого блочного элемента есть своя установленная гарнитура. Вот половина высоты буквы x в соответствии с ней и есть половина x-высоты.

Еще раз, высокий контейнер сейчас "отцентрировался" по базовой линии. Но его высота выходит за пределы экрана, поэтому он съезжает вниз, чтобы вместиться. Но вместе с ним и базовая линия вынуждена "съехать" тоже. В спецификации это явно не сказано, но это логично ведь. Если бы не съезжала, то в вашем примере базовая линия всегда наверху оставалась бы, а не внизу высокого контейнера (.parent).

В смысле проигнорирована? Вот, все норм. А что касается .helper, то да, он сдвигает базовую линию по тем же правилам. Фактически, он поднимается, чтобы его средняя точка + x-высота совпала с позицией, но так как вверху места нет, съезжает базовая линия.

Вообще, спецификация говорит примерно: средняя точка между верхним и нижним краями выравнивается по базовой линии плюс половина высоты символа x. В общем, vertical-align на .child выравнивает сам чайлд относительно базовой линии. Но она (базовая линия) по-прежнему остается внизу. А вот .helper по сути выталкивает ее на середину, и вместе с ней и .child. Попробуйте создать вспомогательную линию, чтобы увидеть, как все происходит (1, 2).

Ну, breadcrumbs и контент - левый контейнер, а сайдбар - правый. http://codepen.io/anon/pen/WrbeqY

Позиционирование потому что по центру. А высота страницы разная. Можно поставить background-position: top;

Что-то слишком много она весит для такой картинки. Может, вам стоит просто оптимизировать ее. Учитывая, что это текстура коры, то можно попытаться довольно сильно пожать ее без заметных видимых артефактов.

Да, я посмотрел ;-) Вообще, есть и другие способы центрировать: flexbox, top: 50% и translateY(-50%). В том примере можно контейнеру добавить white-space: nowrap, чтобы полноширинная картинка не съезжала. Или обнулить размер шрифта (тоже на контейнере). Правда, если внутри у вас там есть текст, то для внутренней обертки нужно будет вернуть значения как было.

Ну, смысл такой: http://codepen.io/anon/pen/rxNveY

Так выравнивайте не с помощью таблиц. Тогда этих проблем не будет. Кстати, в вашем примере с Яндекс фотками выравнивание как раз осуществляется с помощью псевдоэлемента.

Не к background, а к самой картинке. Вам же Q4Dizzy показал. Что-то типа этого. Единственно, раз вы выравниваете по вертикали с помощью таблицы, высоту установить на саму таблицу не получиться, так как она подстраивается под содержимое, а не наоборот. Вроде, если ставить высоту на table-cell, то нормально работает.

Так а чем max-width и max-height не подходят?

Так вы же пытаетесь повесить обработчик на несуществующую ноду, а только потом генерируете картинки. Либо делайте это после, но лучше, как указал Great Rash, использовать делегирование.

не не так - спросили про то что если содержимое сайдебара есть то контент 70% если же в сайдебаре отсуствует содержимое то контент 100% Вообще было так: Но если по вашему, то только если в сайдбаре не будет контента и его высота при этом схлопнется в 0 (то есть, чтобы не было никаких полей, отступов и/или границ сверху и снизу).

У вас на .container стоит overflow: hidden. (Вот почему очищать с помощью overflow не стоит.)

Нет :-)

Эти селекторы в целом ведут себя, как и остальные, когда браузер просматривает правила справа налево. То есть, если грубо, браузер сналача выбирает все четные элементы (2n), затем ищет пересечение с селектором .d2 и красит их в красный. Аналогично с другим правилом. В общем, пока что с помощью CSS универсального способа нет. Возможно, вот это как раз то, что нужно. Но это пока только draft.

http://codepen.io/anon/pen/Rrbwqz?editors=110

Да это кому как нравится. (Вообще, это модификатор.)

Просто делайте через назначение классов.

А зачем вы вообще так их вкладываете друг в друга? Используйте родительский селектор (&). + link

Ну так это же зависит от того, какой вложенности вы сами придерживаетесь. По поводу БЭМ, то тут можно ограничиваться двумя уровнями вложенности. На верхнем - блок, на втором - элементы. В крайнем случае, можно еще спуститься на один уровень для модификаторов. А можно просто продублировать название элемента. В любом случае, мне кажется, что вы путаете понятия. Проблема ведь не в препроцессоре. Это всего лишь инструмент. А какую методологию вы выберите: БЭМ, OOCSS или еще что, и как будете писать - это другое.

Тогда придется отступы настраивать у картинки. Например, для 'body.png' это будет 50px * 100% / 700px = 7.1428%.

Так там ведь проблема как раз в background-size: cover, как я понял. Toleri, странно, что вы ничего не смогли найти по этому вопросу.

Да и на эмуляторе нормально не отображается. Можно установить min-height: 100% на html и body. Или background-attachment: fixed.