nicht angemeldet
Hallo Detlef,
habe ein wenig rumprobiert.
Der IE kann bei deinem Entwurf die Höhe im header nicht anpassen, das scheint bekannt zu sein. In meinen Beispiel verwende ich ein wenig Script und position:fixed, während position:sticky eleganter wäre, doch da hapert es noch mit der Unterstützung. Zumindest funzt es so bei IE 11, Edge, Chrome 44~, FireFox 40~
gr qx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5-Seite mit Grundstruktur</title>
<style>
* {
box-sizing:border-box;
}
html, body {
margin: 0;
height: 100vh;
font-family: sans-serif;
}
body {
max-width: 60em;
margin: 0 auto;
}
header {
position: sticky;
position: fixed;
top: 0;
margin: 0 0 1px 0;
width: 100%;
max-width: 60em;
border: 1px solid Green;
background-color: PaleGreen;
z-index: 1;
}
header h1 {
margin: 0;
padding: .5em;
}
header nav {
text-align: right;
margin-right: 2em;
}
header ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0 0 .5em 0;
}
header li {
display: inline-block;
text-align: center;
padding: .1em .5em;
border: 1px solid Green;
}
main {
position: relative;
display: flex;
flex-wrap: wrap;
flex: 1;
}
main nav {
flex: 0 0 10em;
background: GreenYellow;
border: 1px solid Red;
}
main article {
flex: 1;
margin: 0 0 0 1px;
background: Whitesmoke;
border: 1px solid Black;
padding: 1em;
}
footer {
background: SpringGreen;
margin: 1px 0 0 0;
border: 1px solid Blue;
width: 100%;
}
@media screen and (max-width: 32em) {
main {
flex-direction: column;
}
main nav {
flex: auto;
}
main article {
flex: auto;
}
footer {
border: 1px solid Blue;
}
}
</style>
<script>
window.onload = function() {
document.getElementsByTagName('main')[0].style.top = document.getElementsByTagName('header')[0].offsetHeight + 'px'
}
</script>
</head>
<body>
<header>
<h1>Titelzeile - sie hat eine größere Länge</h1>
<nav rule="navigation">
<ul>
<li>Feld 1</li>
<li>Feld 2</li>
<li>Feld 3</li>
</ul>
</nav>
</header>
<main role="main">
<nav rule="navigation">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Unterseite 1</a></li>
<li><a href="#">Unterseite 2</a></li>
<li><a href="#">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>
<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>
<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