У меня есть фрейм, в котором будет размещаться дерево навигации. Я хочу иметь синюю рамку с правой стороны кадра. Эта граница должна заполнять всю область фрейма сверху донизу, а фрейм должен быть прокручиваемым.
Рамка не имеет фиксированного размера, она заполняет всю левую часть окна браузера и меняет размер, когда пользователь изменяет размер окна браузера.
Фрейм дерева (и минимальный контекст) определяется как:
<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>
Теперь, если содержимое дерева достаточно велико, чтобы заполнить область фрейма (или больше, и в этом случае полосы прокрутки добавляются автоматически), это работает хорошо.
Однако, если дерево «слишком маленькое» и не расширяется, чтобы заполнить всю область кадра, тогда граница не заполнит всю правую часть кадра, а остановится на полпути вниз.
ОБНОВЛЕНИЕ: похоже, это зависит от браузера. В 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 граница по какой-то причине остается на месте при прокрутке.
ОБНОВЛЕНИЕ: Это не удается (т.е. граница исчезает при прокрутке) во всех Chrome, Firefox и Opera.
Есть ли простой способ заставить его работать так, как я хочу, и в других браузерах?
С другой стороны, фон работает так, как ожидалось, он будет заполнять всю область кадра во всех случаях, так почему бы не использовать границу?
РЕШЕНИЕ:
Наконец, найденное решение состояло в том, чтобы установить границу элемента BODY вместо HTML, а также установить высоту элемента HTML на 100% и минимальную высоту элемента BODY на 100%.
Использование min-height для BODY вместо height гарантирует, что граница не исчезнет при прокрутке и заполнит всю границу для «слишком короткого» содержимого.
<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]-->
borderне на внутреннюю html-страницу, а в iframe? - person Zoltan Toth schedule 15.11.2011