CSS max-height funktioniert nicht

Ich habe ein sehr einfaches Problem, wo ich ein div zu erweitern, um seinen Inhalt anzupassen, es sei denn, die Höhe erreicht eine bestimmte Größe, wenn ich möchte das div stattdessen vertikal scrollen. Als Test habe ich eine Seite erstellt mit:CSS max-height funktioniert nicht

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

Leider scheint die maximale Höhe nicht zu funktionieren. Was mache ich falsch?

Ich verwende IE7.

Quelle

2009-02-06 Baffled by ASP.NET

Das Problem ist Ihr Browser. Vielleicht könntest du dieses div in ein anderes div mit einer festen Höhe von 25px einpacken. Natürlich wäre das nicht genau dasselbe wie maximale Höhe.

An article about a solution.

Edit:According to Microsoft sollte es in IE7 + arbeiten.

Haben Sie einen geeigneten Doctype eingestellt? Wenn nicht, verwendet IE7 eine alte Layout-Engine. Sie sollten HTML 4 oder XHTML verwenden.

Quelle

2009-02-06 15:34:02

Hier ist der Cross-Browser-Weg min-height einzustellen:

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

IE behandelt die Höhe Attribut als min-height und ignoriert min-height.

Bearbeiten: Misread die Frage als Min-Höhe! (> _ <)

Quelle

2009-02-06 15:30:25 tj111

Wird das Problem mit der maximalen Höhe behoben? –

Nicht so weit ich weiß. Ich denke, Sie müssen CSS-Ausdrücke (ugh) oder Javascript verwenden, um max-Höhe zu beheben. Dies funktioniert nur, weil IE Höhe als min-Höhe behandelt, und die letzte Regel verwendet, um zu erscheinen, so dass es die 'auto' ignoriert. Wenn Sie es zur Arbeit bekommen, würde ich gerne wissen :). – tj111

'Höhe: auto;' arbeitete für mich zusammen mit 'min-height' – Sterex

Ihr Code funktioniert für mich.

Wenn ich es mit einer Seite verpacken!

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

Funktioniert in IE7 und Chrome in Ordnung.

FF3 gibt mir keine Schriftrollen.

Aber die maximale Höhe funktioniert gut in allen drei.

Ohne die umgebende Seite, obwohl Ihr Code-Snippet nicht funktioniert. Ich schlage vor, Code in einer gültigen HTML-Seite zu testen. * grins *

Quelle

2009-02-06 15:37:47

Das ist wegen der Doctype Sie haben. Leider kann ich diesen Doctype nicht verwenden, da er die von uns verwendete Kontrollgruppe beeinträchtigt. –

Welchen Doctype brauchst du, damit spiele ich. –

Das FireFox-Problem ist aufgetreten, die maximale Höhe ist zu klein für den Scroller-Chrom, wodurch er verschwindet. –

CSS max-height funktioniert nicht

Antwort

Verwandte Themen