Stfw.RuТекст при превышении высоты слоя отображается поверх него. Как это исправить?
🕛 19.01.2009, 20:52
Применение строгого <!DOCTYPE> заставляет браузеры отображать заданную высоту слоя, независимо от его содержимого. Если текст превышает высоту слоя, он отображается поверх него (рис. 1). Изменить поведение браузера можно двумя способами. Первый способ достаточно очевиден и заключается в том, что для слоя не надо задавать атрибут height. Тогда его значение по умолчанию будет auto и высота слоя будет автоматически подстраиваться под содержимое.
Второй способ состоит в добавлении к слою атрибута overflow со значением auto. При этом если текст не помещается в отведенные размеры, автоматически появляется полоса прокрутки (пример 1).
Пример 1. Полосы прокрутки в слое
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>Высота слоя</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> #layer { background: #fc0; /* Цвет фона */ height: 100px; /* Высота слоя */ padding: 5px; /* Поля вокруг текста */ overflow: auto; /* Добавляем полосы прокрутки */ } </style> </head> <body> <div id="layer"> Индикатор взрывоопасно окрашивает валентный электрон, что существенно снижает выход целевого спирта. Отсюда видно, что супермолекула поглощает продукт реакции не только в вакууме, но и в любой нейтральной среде относительно низкой плотности. </div> </body>
</html>