nicht angemeldet
Wertes Forum,
Mir gelingt es trotz vieler Versuche nicht, mit dem Flexbox-Verfahren den Seitenheader fixiert zu halten, während aller weiterer Inhalt scrollbar ist. Ich möchte den Titel des Webprojekts mit der aktuellen Kurz-Navigation und einer internen Schlagwortsuche dauerhaft im Headerbereich angezeigt halten. Bislang weigert sich der IE 11 (Edge funktioniert) und z.T. Opera und Chrome, wo mehr Seiteninhalt durch den Footerbereich hindurch den Flex-Container verläßt. Ich hoffe, hier Hilfe zu finden.
Mit freundlichem Gruß Detlef Mietke
Der kommentierte Versuchsstand ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<style>
/*
html mit height:100% machen die Probleme mit IE
aber ohne diese Angabe bleibt header nicht fixiert
*/
html, body {
margin: 0;
padding: 0;
height: 100%; /* ohne bleibt header nicht fixiert */
font-family: sans-serif;
background: #FFFFFF;
}
body{
display: flex;
flex-direction: column;
max-width: 60em;
margin: 0 auto;
}
header {
/* flex: 0; sonst Höhe veränderlich, flex-basis: auto reicht alleine */
flex-basis: auto; /* ohne nur Rahmenlinien, kein Inhalt im IE11, Opera, Chrome */
border: solid #008000;
background-color: #98FB98;
}
header ul li {
list-style: none;
display: inline;
float: right;
padding-right: 20px;
}
main {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
}
nav {
flex: 0 0 10em;
background: #ffff00;
border: solid #FF0000;
}
article {
flex: 4;
background: #DCDCDC ;
border: solid #000000;
padding: 10px;
}
footer {
background: #e4ebf2;
border: solid #00FF00;
flex: 1;
flex-shrink: 1; /* bei 0 Horizontalscrollbalken */
flex-basis: 100%; /* ohne nicht als unteres Item */
}
@media screen and (max-width: 32em) { /* 512 px */
main {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
/* bei zu schmalem viewport fällt die Listen-Zeile aus dem header in die Navigation (nur IE 11)
Textinhalt fließt nach unten aus dem article-Item heraus (nur IE 11)
*/
nav {
flex: auto; /* ebenso flex: 1 1 auto; */
background: #ffff00;
border: solid #FF0000;
}
article {
flex: auto;
background: #DCDCDC ;
border: solid #000000;
padding: 10px;
}
footer {
flex: auto; /* oder flex: 1 1 auto */
background: #e4ebf2;
border: solid #00FF00;
}
}
</style>
<title>HTML5-Seite mit Grundstruktur</title>
</head>
<body>
<header>
<h1>Titelzeile - sie hat eine größere Länge</h1>
<ul>
<li>Feld 1</li>
<li>Feld 2</li>
<li>Feld 3</li>
</ul>
</header>
<main role="main">
<nav>
<ul>
<li><a href="#link_1.html">Startseite</a></li>
<li><a href="#link_2.html">Unterseite 1</a></li>
<li><a href="#link_3.html">Unterseite 2</a></li>
<li><a href="#link_4.html">Kontakt</a></li>
</ul>
</nav>
<article>
<h2>Titel für Artikelbereich</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non quam nostram quidem, inquit Pomponius iocans; Sed haec omittamus; Duo Reges: constructio interrete. Quid me istud rogas? Quod si ita se habeat, non possit beatam praestare vitam sapientia. Videamus igitur sententias eorum, tum ad verba redeamus. Cur iustitia laudatur? Ut optime, secundum naturam affectum esse possit. Claudii libidini, qui tum erat summo ne imperio, dederetur.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eam tum adesse, cum dolor omnis absit; Nihilo beatiorem esse Metellum quam Regulum. Cave putes quicquam esse verius. Bona autem corporis huic sunt, quod posterius posui, similiora. Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur; Comprehensum, quod cognitum non habet? Quae diligentissime contra Aristonem dicuntur a Chryippo. Duo Reges: constructio interrete. Qui ita affectus, beatum esse numquam probabis; Mihi quidem Antiochum, quem audis, satis belle videris attendere.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eam tum adesse, cum dolor omnis absit; Nihilo beatiorem esse Metellum quam Regulum. Cave putes quicquam esse verius. Bona autem corporis huic sunt, quod posterius posui, similiora. Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur; Comprehensum, quod cognitum non habet? Quae diligentissime contra Aristonem dicuntur a Chryippo. Duo Reges: constructio interrete. Qui ita affectus, beatum esse numquam probabis; Mihi quidem Antiochum, quem audis, satis belle videris attendere.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eam tum adesse, cum dolor omnis absit; Nihilo beatiorem esse Metellum quam Regulum. Cave putes quicquam esse verius. Bona autem corporis huic sunt, quod posterius posui, similiora. Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur; Comprehensum, quod cognitum non habet? Quae diligentissime contra Aristonem dicuntur a Chryippo. Duo Reges: constructio interrete. Qui ita affectus, beatum esse numquam probabis; Mihi quidem Antiochum, quem audis, satis belle videris attendere.
</p>
</article>
<footer>
<h3>Footerbereich</h3>
</footer>
</main>
</body>
</html>
Matthias Apsel
Tabellenkalk
Orlok
Gunnar Bittersmann