Получите полосу прокрутки с {position: absolute;справа: 0px;} - PullRequest
Новая
       18

Получите полосу прокрутки с {position: absolute;справа: 0px;}

0 голосов
/ 20 октября 2011

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

Следующий код (в iframe) отлично работает с левым позиционированием: 

<html>
    <body>
        <div>
            <table>
                <tr>
                    <td>lorem ipsum here</td>
                    <td>lorem ipsum here</td>
                    <td>lorem ipsum here</td>
                    <td>lorem ipsum here</td>
                    <td>lorem ipsum here</td>
                </tr>
            </table>
        </div>
    </body>
</html>

html{
    overflow:scroll;
}
table{
    position: absolute; 
    left: 0px;
}
td {
    white-space: nowrap;
    border: 1px solid black;
}

Точно такой же CSS с правым позиционированием (справа: 0px;) нарушен, горизонтальная полоса прокрутки не активируется.

РЕДАКТИРОВАТЬ: горизонтальная полоса прокрутки

EDIT2: этот HTML-бит находится в iframe

EDIT3: Интересно, document.getElementById ('tableID'). ScrollWidth дает точную информацию о scrollWidth, который должен иметь scrollBar, но не отображать.Я мог бы попробовать уродливое уродливое решение моей проблемы (т.е. создать искусственную полосу прокрутки, fml)

1 Ответ

2 голосов
/ 20 октября 2011

Чтобы получить полосы прокрутки, таблица должна появиться в потоке; если вы измените значение position на absolute, оно будет выведено из потока, поэтому без JavaScript для вычисления цифр (не делайте этого когда-либо !) вы не сможете этого сделать.

Мне кажется, что вы хотите просто удалить поле на странице. Если это правильно, просто введите ваши стили body { padding: 0; } (и удалите position и left из table).

Кроме того, если вы просто хотите, чтобы он прокручивался, вам не нужно помещать его в iframe (использование iframes безвозмездно нежелательно). overflow: scroll на контейнере достаточно.

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

...