CSS max-height nie działa

Mam bardzo prosty problem, gdy potrzebuję elementu div do rozwinięcia, aby dopasować jego zawartość, chyba że wysokość osiągnie określony rozmiar, kiedy chcę, aby div przewijał w pionie zamiast tego. Jako test, stworzyłem stronę zawierającą:CSS max-height nie działa

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

Niestety, max-height nie wydają się działać. Co ja robię źle?

Używam IE7.

Źródło

2009-02-06 Baffled by ASP.NET

Problem stanowi Twoja przeglądarka. Może mógłbyś zawinąć ten div w inny div, który ma stałą wysokość 25 pikseli. Oczywiście nie będzie to dokładnie to samo, co maksymalna wysokość.

An article about a solution.

Edit:According to Microsoft powinien działać w IE7 +.

Czy ustawiłeś odpowiedni typ dokumentu? Jeśli nie, IE7 używa starego silnika układu. Powinieneś używać HTML 4 lub XHTML.

Źródło

2009-02-06 15:34:02

Oto sposób cross-browser, aby ustawić min-height:

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

IE traktuje jako atrybut wysokość min-wysokości, a ignoruje min-height.

Edytuj: Błędne odczytanie pytania jako min-height! (> _ <)

Źródło

2009-02-06 15:30:25 tj111

Czy to rozwiąże problem z maksymalną wysokością? –

Nie o ile wiem. Myślę, że musisz użyć wyrażeń CSS (ugh) lub javascript, aby naprawić maksymalną wysokość. To działa tylko dlatego, że IE traktuje wysokość jako min-wysokość i użyje ostatniej reguły do wyświetlenia, więc ignoruje "auto". Jeśli jednak zadziała, chciałbym wiedzieć :). – tj111

'height: auto;' pracował dla mnie razem z 'min-height' – Sterex

Twój kod działa dla mnie.

Po zawinięciu strony!

<!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>

Działa w grach IE7 i Chrome.

FF3 nie podaje mi pasków przewijania.

Ale maksymalna wysokość działa dobrze we wszystkich trzech.

Bez otaczającej strony, mimo że Twój fragment kodu nie działa. Sugeruję testowanie kodu na poprawnej stronie HTML. * uśmiechy *

Źródło

2009-02-06 15:37:47

To ze względu na twój doctype. Niestety nie mogę używać tego typu dokumentu, ponieważ przeszkadza on w używaniu zestawu kontrolnego. –

Jaki rodzaj doctyku potrzebujesz użyć, skrzypię z tym. –

Rozwinął problem z FireFox, maksymalna wysokość jest zbyt mała dla chromu przewijacza, powodując jego zniknięcie. –

CSS max-height nie działa

Odpowiedz

Powiązane problemy