Правый отступ на абсолютно позиционированном элементе прокрутки - PullRequest
Новая
       19

Правый отступ на абсолютно позиционированном элементе прокрутки

2 голосов
/ 06 июня 2011

У меня есть абсолютно позиционированный родительский div, атрибуты top, right, bottom и left равны 0px, поэтому он изменяется в браузере. Если его содержимое превышает ширину или высоту документа, на нем отображаются полосы прокрутки (как и в этом приложении).

Этот родительский div также имеет верхний, правый, нижний и левый отступы в 20 пикселей, так что вокруг его содержимого всегда есть белое поле.

Этот родительский элемент содержит еще один div, который по причинам теста установлен на 2000px X 2000px и имеет цвет фона, отличный от родительского.

Теперь верхний, нижний и левый 20-пиксельные отступы родителей работают нормально, но правый отступ не появляется, что чертовски запутывает меня. Эта особенность встречается во всех современных браузерах, так что, должно быть, это что-то серьезное, чего мне не хватает. 

<div id="parent" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 20px; overflow: auto; background-color: #FFFFFF;">

    <div id="child" style="width: 2000px; height: 2000px; background-color: #666666;">

        This divs width and height is deliberately set higher than the document/window width to cause the parents scrollbars to appear. 

    </div>

</div>

Итак, вопрос таков: как я могу получить правильный отступ родительского элемента для применения?

Ответы [ 2 ]

0 голосов
/ 14 августа 2011

Удалите padding: 20px; из родительского div и добавьте display:inline-block;margin:20px; к внутреннему div.Протестировано в IE7 +, Firefox 5.0 и Chrome.

Ниже приведен HTML-код: 

<div id="parent" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: auto; background-color: #FFFFFF;">
    <div id="child" style="width: 2000px; height: 2000px; background-color: #666666; display:inline-block; margin:20px;">
        This divs width and height is deliberately set higher than the document/window width to cause the parents scrollbars to appear. 
    </div>
</div>
0 голосов
/ 06 июня 2011

Так работает блочная модель. Внутренний дочерний элемент div больше, чем его родитель, поэтому он переполняет правый / нижний край родительского элемента. Если вы поместите рамку вокруг родительского элемента div (border: 1px solid red), вы увидите, что родительский элемент правильно занимает все окно браузера.

Я не знаю, как у вас работает нижняя прокладка, так как справа / снизу для меня оба покрыты серым цветом ребенка на FF4 и Chrome.

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

...