1. дома
  2. Вопрос и ответ
  3. overflow-y inside iframe

overflow-y inside iframe

2011-01-19 1 views
0

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

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

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

Когда я добавил CSS «HTML, тело, форма {высота: 100%; поле: 0px; обивка: 0px;} «На страницу IFrame это почти сработало, но, к сожалению, я не смог избавиться от дублирующих полос прокрутки.

Любые предложения?

источник

2011-01-19 Victor F

ответ

1

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

Дивы просто не работают. Они, как правило, переполняются по мере необходимости, разливаясь везде. Единственный способ сохранить размер div в соответствии с его содержимым (я говорю на опыте) - дать ему явную высоту. В противном случае он либо выйдет из контейнера, либо, если его контейнер будет собственным block formatting context, его контейнер начнет прокрутку.

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

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

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

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

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

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

источник

2011-01-19 22:00:35 jtpereyda

+0

Я попробую ваши предложения. Благодаря! –

0

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

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

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

источник

2011-01-19 21:20:04 vancouverwill

+1

Да и использование Ajax или какой-либо серверной части будет по-прежнему давать ему возможность использовать «iframe» эффект использования внешней страницы с контентом. – fiiv

+0

Привет, спасибо за ответ. Мне не нравится третий пример, потому что высота для div определяется в пикселях, а не процентах. Проблема в моем реальном проекте, iframe может быть изменен, поэтому, если iframe станет 200 пикселей вместо 400 пикселей, которые я изначально определил, часть содержимого div будет скрыта. –

+0

С помощью прокручиваемого и автоматического переопределения я имею в виду следующее: если IFrame имеет высоту 400 пикселей, то div не должен превышать 400 пикселей. Но поскольку содержимое div может не соответствовать 400 пикселям, я хочу, чтобы у div была полоса прокрутки (например, у меня было в третьем примере моего примера) –

0

Итак, реализация простого 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>

источник

2011-01-21 15:38:27

+0

Кажется, что в случае с таблицами решение, которое вам нужно реализовать, это следующее: http://www.oasections.com/articles/scrollabletable.html –

 Смежные вопросы

  • Нет связанных вопросов^_^