Максимальная высота CSS не работает - PullRequest
Новая
       11

Максимальная высота CSS не работает

13 голосов
/ 06 февраля 2009

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

<div style="width:300px;max-height:25px;background-color:green;overflow:auto;">
    1<br />
    2<br />
    3<br />
    4<br />
    5
</div>

К сожалению, max-height не работает. Что я делаю не так?

Я использую IE7.

Ответы [ 3 ]

9 голосов
/ 06 февраля 2009

Проблема в вашем браузере. Может быть, вы могли бы обернуть этот div в другом div, который имеет фиксированную высоту 25px. Конечно, это будет не то же самое, что max-height.

Статья о решении.

Редактировать: Согласно Microsoft он должен работать в IE7 +.

Вы установили соответствующий тип документа? Если нет, то IE7 использует старый механизм компоновки. Вы должны использовать HTML 4 или XHTML.

6 голосов
/ 06 февраля 2009

Вот кросс-браузерный способ установки минимальной высоты: 

min-height: 400px;
height:auto !important;
height:400px;

IE обрабатывает атрибут высоты как min-height и игнорирует min-height.

Редактировать: неправильно истолковать вопрос как минимальная высота! (> _ <) </p>

2 голосов
/ 06 февраля 2009

Ваш код работает для меня.

Когда я обертываю это страницей! 

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>1 2 3 4 5</title>
</head>

<body>
<div style="width:300px;max-height:25px;background-color:green;overflow:auto;">
    1<br />
    2<br />
    3<br />
    4<br />
    5
</div>
</body>

</html>

Работает в IE7 и Chrome нормально.

FF3 не дает мне полосы прокрутки.

Но максимальная высота отлично работает во всех трех.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...