Установка границы для прокручиваемого HTML-фрейма - PullRequest
Новая
       17

Установка границы для прокручиваемого HTML-фрейма

2 голосов
/ 15 ноября 2011

У меня есть кадр, в котором будет размещаться дерево навигации.Я хочу иметь синюю рамку на правой стороне рамки.Эта граница должна заполнять всю область фрейма сверху вниз, и рамка также должна быть прокручиваемой.

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

Рамка дерева (и минимальный контекст) определяется как: 

<html>
<head><title></title></head>
<frameset cols="250,*" frameborder="0" framespacing="0" >  
    <frame src="tree.html" scrolling="auto" /> 
    <frame src="about:blank" name="navTarget" scrolling="auto" /> 
</frameset>
</html>

В содержимом рамки (tree.html) я определяю границу как: 

<style type="text/css">
    html {
        border-right: red 2px solid;
        background: yellow;
    }
</style>

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

Однако, если дерево"слишком мала" и не расширяется, чтобы заполнить всю область кадра, тогда граница не заполнит всю правую сторону рамки, но остановится на полпути вниз.

Tree content does not will the frame

ОБНОВЛЕНИЕ: Это, кажется, зависит от браузера.В Firefox 8 и Opera 11 граница содержимого обрезается, но в Chrome она заполняет всю правую границу кадра.

Это, в свою очередь, можно исправить, заставляя дерево расширяться до доступной области: 

<style type="text/css">
    html {
        height: 100%;
        border-right: blue 2px solid;
        background:yellow;
    }
</style>

Но в этом случае, когда дерево достаточно большое, чтобы требовать прокрутки, вы заметите, что граница прокручивается при прокрутке вниз.По крайней мере, в современных браузерах, таких как IE8 +, Firefox, Chrome и Opera.В IE6 граница по какой-то причине останется на месте при прокрутке.

Border disappers when scrolling down

ОБНОВЛЕНИЕ: эта ошибка не срабатывает (т. Е. Границы прокручиваются при прокрутке) во всех Chrome, Firefox и Opera.

Есть ли простой способ заставить его работать так, как я хочу, и в других браузерах?

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

РЕШЕНИЕ:

В итоге было найдено решение установить границу элемента BODY вместо HTML, а также установить высоту элемента HTML в значениеОт 100% и минимальной высоты элемента BODY до 100%.

Использование минимальной высоты для BODY вместо высоты гарантирует, что граница не исчезнет при прокрутке и заполнит всю границу для «слишком короткого» содержимого. 

<style type="text/css">
    html { height:100%; }
    body { min-height:100%; }
    body { border-right:blue 2px solid; }
</style>

Так как IE6 не поддерживает минимальную высоту, мы используем простую высоту для него.Что работает в этом браузере (граница не исчезает при прокрутке), но не в более современных. 

<!--[if lt IE 7]>
<style type="text/css">
body { height:100%; }
</style>
<![endif]-->

1 Ответ

1 голос
/ 15 ноября 2011

Да.Как сказал @Zoltan Toth, добавьте стили к самому iframe ... (вам также может понадобиться атрибут frameborder = "0" в некоторых браузерах, и вы захотите сделать:

ОБНОВЛЕНО:

В стилях tree.html: 

body { border:0; border-right: 2px solid blue; min-height: 400px; /* change this */ }

В ссылочном документе: 

<iframe src="tree.html" frameborder="0" style="border:0; width:400px; height:400px; "></iframe>
...