переполнение внутри фрейма - PullRequest
Новая
       11

переполнение внутри фрейма

0 голосов
/ 19 января 2011

Я пытаюсь добиться прокручиваемого, автоматически изменяемого размера div внутри iframe.

Проблема в том, что iframe, в отличие от div, имеет свитокпоэтому само по себе свойство overflow-y моего div игнорируется, и вместо небольшой части отображается все содержимое моего div.

Лучшее объяснение - это пример, который вы можете просмотреть понажав http://www.alocet.com/VictorsTestFolder/Sample/Default.html

Когда я добавил CSS «html, body, form {height: 100%; margin: 0px; padding: 0px;}» на страницу IFrame, это почти сработало, но к сожалению я неНе удается избавиться от дублирующих полос прокрутки.

Есть предложения?

Ответы [ 3 ]

1 голос
/ 20 января 2011

Я собираюсь выйти на конечность и сказать, что вы действительно не можете делать то, что вы хотите делать без JavaScript.

Div просто не работает так.Как правило, они переполняются настолько, насколько это необходимо, и проливаются везде.Единственный способ сохранить размер div в соответствии с его содержимым (я говорю об опыте) - дать ему явную высоту.В противном случае он либо выльется из своего контейнера, либо, если его контейнер имеет собственный контекст форматирования блока , заставит свой контейнер начать прокрутку.

Кажется, что iframe является своим собственным контекстом.Таким образом, вы ДОЛЖНЫ установить явную высоту, если хотите, чтобы div, который он содержит, сохранял свою компактность.Я вижу два варианта:

Вы можете добавить параметр для сервера, чтобы изменить высоту страницы: 

<iframe src="Default_files/IFrame2.htm?h=400"

Затем создайте содержащий div для всей страницы с фиксированнымвысота, которая вписывается в iframe.Все внутри него должно работать правильно. Затем установите для div, который может иметь много содержимого, фиксированный размер.

Другой вариант - использовать JavaScript, который, я думаю, может получить именно переменныевы ищете для использования document.documentElement.clientWidth. См. Эту статью для более подробной информации .Даже в этом случае вы все равно заканчиваете тем, что устанавливаете рамку страницы на фиксированную высоту.

Оба метода - схематичные обходные пути, но я несколько уверен, что вы не можете делать то, что хотите, только с помощью CSS.

0 голосов
/ 21 января 2011

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style type="text/css">
            html, body, form
            {
                margin: 0px;
                padding: 0px;
            }

        </style>
        <script type="text/javascript" language="javascript">
            window.onresize = doResize;
            window.onload = doResize;
            function doResize() {
                document.getElementById("popupHeight").style.height = (window.innerHeight - 40) + 'px';
            }
        </script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="popupHeight">
            Text before the div
            <br />
            <div runat="server" id="tblTabGroups" style="overflow-y: scroll; height: 100%;">
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            </div>
            Text after the div
        </div>
        </form>
    </body>
    </html>
0 голосов
/ 20 января 2011

что не так с вашим третьим примером? у вас есть фиксированный размер iframe, а внутри div все еще есть полоса прокрутки.

Кроме того, что вы подразумеваете под прокручиваемым, автоматически изменяемым размером div, конечно, если он имеет автоматическое изменение размера, у него не будет полосы прокрутки?

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...