Article passt größe nicht an text an

[Manuel]

Guten Tag Experten, ich habe bei bestimmten Browsern (va auf mobilen Endgeräten (außer Firefox und Safari) ein Problem mit einem CSS File für ein Gästebuch auf einem lokalen Webserver.

Ich habe Text in einem Article und der Article soll sich an die Länge des Textes anpassen. Am unteren Ende des Bildschirms steht immer der Footer, außer wenn der Text Länger als die Höhe des Bildschirms-Footer-Nav-Header ist. Das Funktioniert auch alles ganz gut nur eben nicht in allen Browsern.

Im Anhang findet ihr die betreffende CSS-Datei und ein Bild, das das Problem darstellt.

*{
	text-transform:lowercase;
}
	
html{
	width:100%;
	height:100%;
	margin:0;
}
	
	body{	
        display: flex; 			
        flex-flow: row wrap;
		flex-direction: column;
		
		display: -webkit-box; 			
		display: -ms-flexbox; 			
		display: flex; 			
		-webkit-box-orient: horizontal; 			
		-webkit-box-direction: normal; 			
		-ms-flex-flow: row wrap; 			
		flex-flow: row wrap;
		-ms-flex-direction: column;
		flex-direction: column;
		
		
		margin: 0 auto;
		max-width: 60em;
		min-height: 100%;
        background: green;
		font-family: Century Gothic, Calibri, sans serif;  
    }
	  
		main{
			display: flex; 
			flex: 1 1 100%;
			
			display: -webkit-box; 
			display: -ms-flexbox; 
			display: flex; 
			-webkit-box-flex: 1 1 100%; 
			-ms-flex: 1 1 100%; 
			flex: 1 1 100%;
			
			position:relative;
		}
		
			header{
				padding:10px;				
			}
			
			header nav {
				flex: 1 1 100%;
				
				-webkit-box-flex: 1 1 100%;
				-ms-flex: 1 1 100%;
				flex: 1 1 100%;
			}
	  
			article{
				flex: 1 1 100%;

				-webkit-box-flex: 1 1 100%;
				-ms-flex: 1 1 100%;
				flex: 1 1 100%;				
				
				padding:10px;
				background: #F3F3F3;
			}
						
			nav{
				display: flex; 		
				flex-direction: row;
				
				display: -webkit-box; 		
				display: -ms-flexbox; 		
				display: flex; 		
				-webkit-box-orient: horizontal; 		
				-webkit-box-direction: normal; 		
				-ms-flex-direction: row; 		
				flex-direction: row;
				
				background: #808080;		
				margin-bottom: 1px;
				padding:0;
				border:none;
				position:sticky;

				position:-webkit-sticky;
				position:sticky; 	
			
				top: 0;
			}
			
				nav ul {
					display: flex; 
					flex-flow: row;
					flex: 1 0 100%;
					
					display: -webkit-box; 
					display: -ms-flexbox; 
					display: flex; 
					-webkit-box-orient: horizontal; 
					-webkit-box-direction: normal; 
					-ms-flex-flow: row; 
					flex-flow: row;
					-webkit-box-flex: 1 0 100%;
					-ms-flex: 1 0 100%;
					flex: 1 0 100%;
					
					margin: 0;
					padding:0;
					border:none;
				}
				
					nav li {
						flex: 1 1 20%;
						
						-webkit-box-flex: 1 1 20%;
						-ms-flex: 1 1 20%;
						flex: 1 1 20%;
						
						list-style-type:none;
						color: #080808;
						margin: 0;
						padding:0;
						border:none;
						//width: 20%;
						
					}

						nav a {
							display:inline-block;
							text-align: center;
							padding-top: 15px;
							padding-bottom: 15px;
							text-decoration: none;
							color:#0c0c0c;	
							min-width:100%;
							
						}
						nav a:hover {
							background-color: #f8f8f8;
						}
			
			footer{
				display: flex; 
				
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
					
				padding:10px;
				margin-top: 10px;
				height: 50px;
				background: #808080;
				
				position:sticky;

				position:-webkit-sticky;
				position:sticky; 				
				
			}
			
				header h1{
					color:#909090;
				}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		

Im den Bilder ist zur besseren Ersichtlichkeit der body grün, article weiss und der footer grau.

Da ich noch ein blutiger Anfänger im Webdesign bin hoffe ich doch sehr auf die Hilfe der Profis.

Grüße

Manuel

[Matthias Apsel]

Hallo Manuel,

das CSS ist ohne das HTML, auf das es angewendet werden soll, nicht sonderlich sinnvoll. Die -webkit--Präfixe brauchst du wohl nicht mehr.

Das beste wird sein, du stellst ein online-Beispiel zur Verfügung, etwa bei https://bplaced.net oder bei https://codepen.io.

Bis demnächst
Matthias

[Auge]

Hallo

das CSS ist ohne das HTML, auf das es angewendet werden soll, nicht sonderlich sinnvoll. Die -webkit--Präfixe brauchst du wohl nicht mehr.

Wenn er Geräte mit Android > 2.0 und < 4.4 unterstützen will, schon. Solche Geräte sollten wohl die einzigen sein, die noch in freier Wildbahn anzutreffen sind (wohl vorwiegend 4.1 bis 4.3) und -webkit brauchen. Der MS-Präfix, der zudem mit einer alten Flexbox-Syntax kombiniert ist, ist noch beine andere Geschichte. Ob man den Desktip-IE 10 und den Mobile-IE 10, die mit dem Präfix angesprochen werden, noch mit Flexbox unterstützen will, sollte man sich gut überlegen. Die Wahrscheinlichkeit, diese Browser anzutreffen, dürfte gen 0 tendieren.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Wenn er Geräte mit Android > 2.0 und < 4.4 unterstützen will, schon. Solche Geräte sollten wohl die einzigen sein, die noch in freier Wildbahn anzutreffen sind (wohl vorwiegend 4.1 bis 4.3) und -webkit brauchen.

Brauchen sie auch nicht, wenn die Inhalte bei schmalem Viewport sowieso untereinander dargestellt werden sollen. Bleiben höchstens eine Handvoll alter Tablets …

Der MS-Präfix, der zudem mit einer alten Flexbox-Syntax kombiniert ist, ist noch beine andere Geschichte. Ob man den Desktip-IE 10 und den Mobile-IE 10, die mit dem Präfix angesprochen werden, noch mit Flexbox unterstützen will, sollte man sich gut überlegen.

Ja. I.d.R. kann man die Überlegung mit einem Nein abschließen. Vorgestern hab ich eine Ausnahme gemacht.

LLAP 🖖

[Auge]

Hallo

Wenn er Geräte mit Android > 2.0 und < 4.4 unterstützen will, schon. Solche Geräte sollten wohl die einzigen sein, die noch in freier Wildbahn anzutreffen sind (wohl vorwiegend 4.1 bis 4.3) und -webkit brauchen.

Brauchen sie auch nicht, wenn die Inhalte bei schmalem Viewport sowieso untereinander dargestellt werden sollen. Bleiben höchstens eine Handvoll alter Tablets …

Najaq, bei der Update-„häufigkeit“ für Android-Geräte in Kombination mit der allfälligen Geiz-Ist-Geil-Mentalität der Käufer wird es zwar „höchstens eine Handvoll alter“ Tablet-Typen, aber ein erheblich größere Menge von vorhandenen Geräten sein, auf die man trifft.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Najaq, bei der Update-„häufigkeit“ für Android-Geräte in Kombination mit der allfälligen Geiz-Ist-Geil-Mentalität der Käufer …

Diese Billigheimer! Die bekommen dann halt das, was sie wollen: ein Billig-Layout.

LLAP 🖖

[Auge]

Hallo

Najaq, bei der Update-„häufigkeit“ für Android-Geräte in Kombination mit der allfälligen Geiz-Ist-Geil-Mentalität der Käufer …

Diese Billigheimer! Die bekommen dann halt das, was sie wollen: ein Billig-Layout.

Solange es nur um den Präfix bei identischer Syntax geht, liefere ich das mit. Wenn es, wie im zuvor erwähnten Fall IE 10, zusätzlich um eine weitere zu pflegende Syntax für kaum noch benutzte Browser ginge, läge der Fall anders.

Tschö, Auge

[beatovich]

hallo

body{ display: flex; flex-flow: row wrap; flex-direction: column;

Ich würde dir raten, die Richtung der Hauptachse nicht in einem einzigen CSS Block 10 mal zu ändern.

  display: -webkit-box; 			
  display: -ms-flexbox; 			
  display: flex; 			
  -webkit-box-orient: horizontal; 			
  -webkit-box-direction: normal; 			
  -ms-flex-flow: row wrap; 			
  flex-flow: row wrap;
  -ms-flex-direction: column;
  flex-direction: column;

oder besser zu lernen, was flex-direction mit flex-flow zu tun hat.

hint: flex-direction + flex-wrap = flex-flow