Первый способ достаточно очевиден и заключается в том, что для слоя не надо задавать атрибут 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>