overflow-y: auto|scroll вызывает сдвиг по горизонтали

У меня проблема, похожая на добавление переполнения-y чтобы заблокировать элемент, ширина уменьшается., но я хочу, чтобы мой правый div был центрирован по горизонтали. Итак, у меня есть «маржа: авто;» в правом дел.

Это работало нормально, пока я не добавил «overflow-y: auto» (или прокрутку) в правый div. До этого поля измерялись от всей ширины страницы. После добавления он измеряется от правого края левого div, поэтому вместо того, чтобы центрироваться на странице, он центрируется на оставшейся части страницы.

Простая демонстрация проблемы по адресу:

http://dev.bridgebase.com/barmar_test/demo-overflow.php


css centering overflow
person Barmar    schedule 03.07.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

person nmford    schedule 03.07.2012
comment
Я не знаю точной причины, но, как вы сказали, переполнение-y заставляет правый div центрироваться на оставшейся части страницы. Добавляя position:absolute к левому div (что заставляет его игнорировать float: left; между прочим), вы удаляете его из нормального потока документа, из-за чего правый div центрируется на странице, как если бы левый div не т там. - person nmford; 03.07.2012

arrow_upward
4
arrow_downward

Когда вы добавляете свойство overflow к вашему div, вы определяете новый контекст форматирования. Как указано в документации MDN по этому вопросу, float влияние ограничивается определенный контекст форматирования. Контексты форматирования определяются конкретными правилами, перечисленными в вышеупомянутом документе.

position: absolute — это решение, но вы должны понимать, что абсолютно позиционированные элементы позиционируются относительно их последнего позиционированного предка (т. е. одного с атрибутом position со значением, отличным от static (значение по умолчанию)). Также загляните на MDN, чтобы полностью понять эту концепцию.

Вы можете прочитать эту статью на SitePoint, в которой подробно объясняются плавающие элементы. В частности, вас должен заинтересовать раздел Плавающее и абсолютное позиционирование для многоколоночных макетов.

person Doc Davluz    schedule 19.12.2012