nicht angemeldet
Fixierter Header mit Flexbox-Verfahren klappt nicht richtig
0 0
0 0 2 
Matthias Apsel
0 1 Matthias Apsel
0 0
0 0 
Orlok
0 
Gunnar Bittersmann
0
Fixierter Header mit Flexbox-Verfahren klappt nicht richtig
TabellenkalkWertes 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>
-
Hallo,
probier mal die folgende Lösung aus. Größen, Abstände und Inhalt haben mich erst mal nicht interessiert, es geht mir nur um die Anordnung und das Verhalten der Container.
Die beiden CSS-Anweisungen
body>div { background: green; overflow-y: scroll; flex: 1 1 auto; } body>div { display: flex; flex-wrap: wrap; }können natürlich zusammengefasst werden. Es ging mir nur darum die Auswirkungen auf den Container selbst und die Auswirkungen auf seinen Inhalt im Quelltext zu trennen.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Flexbox: Fixed header 03</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> @media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; min-height: 100%; } html { font-size: 100%; background-color: silver; } body { width: 80%; padding: 0; margin: 0 auto; display: flex; flex-direction: column; } header { background: red; flex: 1 0 auto; } body>div { background: green; overflow-y: scroll; flex: 1 1 auto; } body>div { display: flex; flex-wrap: wrap; } nav { background-color: #ffff00; flex: 0 0 10rem; } main { background-color: #DCDCDC; flex: 1 0 1%; } footer { background-color: #e4ebf2; flex: 1 1 100%; } } @media only screen and (max-width: 650px) { nav { flex: 1 1 100%; } main { flex: 1 1 100%; } } </style> </head> <body> <header> <h2>header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis quis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum.</p> </header> <div> <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> <main> <h1>main</h1> <p>Etiam vel lacus dolor. Quisque at fringilla eros. Vivamus eget turpis sem. Praesent vel hendrerit ante. In hac habitasse platea dictumst. Integer scelerisque diam ut justo feugiat, quis porttitor felis imperdiet. Mauris at ullamcorper sem. In hac habitasse platea dictumst. Vivamus ultrices leo vitae lacinia vulputate. Vestibulum orci ligula, imperdiet non luctus eget, luctus eu nisl. Maecenas mollis eleifend sollicitudin. Praesent dictum tristique ipsum, quis imperdiet quam. Praesent euismod velit sed ipsum posuere vulputate. Praesent placerat ipsum sed neque viverra, sed adipiscing tortor pulvinar. Phasellus blandit sit amet ligula quis ultrices.</p> <p>Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non rutrum neque, ac ultrices sapien. Etiam lacinia libero vitae dolor ullamcorper laoreet. Phasellus at auctor leo. Sed blandit urna non justo ornare blandit. In sagittis tortor viverra iaculis scelerisque. Praesent fringilla sed orci quis varius.</p> <p>Aliquam nec erat non ligula congue ullamcorper id sed massa. Maecenas eget ligula vel dolor suscipit elementum sed a orci. Quisque accumsan mollis lobortis. Vestibulum a lacus viverra, bibendum lacus a, dapibus nulla. Donec laoreet libero ac ante vehicula ultricies. Aenean sollicitudin gravida libero eu tempus. Sed dapibus, felis et consequat aliquet, ante nisl venenatis eros, vitae consequat neque mauris vitae justo. Vestibulum pharetra lacus in est ultricies, bibendum rutrum nisi pulvinar. Mauris ac imperdiet eros, nec convallis velit. Nulla dictum velit eget volutpat suscipit. Aenean eget arcu at ligula convallis rhoncus. Proin ut volutpat leo, nec fringilla erat. Nam pulvinar mattis erat et euismod. Fusce nisl nunc, ultricies ac nulla et, fermentum consequat tellus. Aenean id orci eros.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis quis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat. Integer eu placerat magna, non ornare felis. Aenean eu dapibus leo. Cras dui nisi, volutpat in pretium vitae, ultrices a dui. Nullam consequat feugiat purus non vehicula. Aenean lacinia, mi non euismod malesuada, lorem dolor scelerisque velit, sed consequat ante leo quis nisl.</p> <p>Etiam vel lacus dolor. Quisque at fringilla eros. Vivamus eget turpis sem. Praesent vel hendrerit ante. In hac habitasse platea dictumst. Integer scelerisque diam ut justo feugiat, quis porttitor felis imperdiet. Mauris at ullamcorper sem. In hac habitasse platea dictumst. Vivamus ultrices leo vitae lacinia vulputate. Vestibulum orci ligula, imperdiet non luctus eget, luctus eu nisl. Maecenas mollis eleifend sollicitudin. Praesent dictum tristique ipsum, quis imperdiet quam. Praesent euismod velit sed ipsum posuere vulputate. Praesent placerat ipsum sed neque viverra, sed adipiscing tortor pulvinar. Phasellus blandit sit amet ligula quis ultrices.</p> <p>Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non rutrum neque, ac ultrices sapien. Etiam lacinia libero vitae dolor ullamcorper laoreet. Phasellus at auctor leo. Sed blandit urna non justo ornare blandit. In sagittis tortor viverra iaculis scelerisque. Praesent fringilla sed orci quis varius.</p> <p>Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et.</p> </main> <footer> <h2>footer</h2> <p>Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat.</p> </footer> </div> </body> </html>Gruss
MrMurphy
-
Hallo MrMurphy,
Deine beiden CSS-Anweisungen funktionieren einzeln für sich, wenn jeweils overflow-y: scroll; mit angegeben ist. Der erste CSS-Vorschlag alleine erzeugt zwischen den Abschnitten grüne Hintergrundsfarbbalken (logisch, kein Problem).
body>div { background: green; overflow-y: scroll; flex: 1 1 auto; } body>div { display: flex; flex-wrap: wrap; }Interessante Lösung, wäre ich trotz vieler Recherche nicht darauf gekommen. Erst einmal vielen Dank, muss ich noch genauer testen und verstehen. Mit freundlichen Grüßen
Detlef Mietke
-
Hallo
Deine beiden CSS-Anweisungen funktionieren einzeln für sich, wenn jeweils overflow-y: scroll; mit angegeben ist. Der erste CSS-Vorschlag alleine erzeugt zwischen den Abschnitten grüne Hintergrundsfarbbalken (logisch, kein Problem).
Das verstehe ich nicht. Der Quellcode funktioniert so wie er ist, dann gibt es auch keine Lücken, bei der die grüne Hintergrundfarbe des div zu sehen ist.
Mein Hinweis sollte nur darauf hinweisen, das statt
body>div { background: green; overflow-y: scroll; flex: 1 1 auto; } body>div { display: flex; flex-wrap: wrap; }auch
body>div { background: green; overflow-y: scroll; flex: 1 1 auto; display: flex; flex-wrap: wrap; }geschrieben werden kann. Bis auf den background darf aber keine Anweisung entfernt werden.
Wenn du meinen Quellcode komplett übernimmst sollte eigentlich alles passen.
Gruss
MrMurphy
-
Hallo,
stimmt, wenn Deine beiden CSS-Anweisungen, so wie sie sind, übernommen werden, funktionert es natürlich. Ich habe Dich so verstanden, dass Du wissen wolltest, wie sie einzeln angewendet arbeiten, es ausprobiert und beschrieben. Da habe ich Dich falsch verstanden, Entschuldigung, mein Fehler.
mfG Detlef
-
-
body>div {Was bedeutet diese ">" Verknüpfung und unter welchem Stichwort finde ich Infos dazu?
Danke vorab für Infos dazu.
-
Hallo
Was bedeutet diese ">" Verknüpfung
Selektiere alle div, die direkte Nachfahrten des body sind, also direkte Kinder-Elemente.
unter welchem Stichwort finde ich Infos dazu?
Selektoren
http://www.webmasterpro.de/coding/article/css-referenz-selektoren.html
oder
http://wiki.selfhtml.org/wiki/CSS/Selektoren
Gruss
MrMurphy
-
-
-
-
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>-
Hallo quincunx,
danke für diese interessante Lösung, die, so wie sie ist, sehr gut funktioniert. Ich muss mich erst intensiver besonders mit dem Script beschäftigen, um ihn zu durchschauen.
Beide erhaltenen Vorschläge funktionieren wohl so, wie ich es mir vorstelle. Ohne die Mühen der beiden Autoren zu schmälern würde es mich interessieren, welcher der Vorschläge für die Zukunft gesehen optimaler ist. Wenn ich mein bestehendes Webprojekt mit einigen hundert Seiten entsprechend umgestalte, sollte es langfristigen Bestand haben.
Ich habe schon mehrfach gelesen, dass statt 100vh besser 100% verwendet werden soll - was ist nun wirklich empfehlenswert?
Mit bestem Dank und Gruß Detlef Mietke
-
Hallo Detlef Mietke,
Ich habe schon mehrfach gelesen, dass statt 100vh besser 100% verwendet werden soll - was ist nun wirklich empfehlenswert?
100 Birnen sind deutlich besser als 100 Waschmaschinen?
vhund%sind verschiedene Maßeinheiten, die kannst du nicht vergleichen.100vhist 100% der Höhe des Viewports, 100% ist (unter bestimmten Bedingungen) die Höhe des Elternelements.Siehe: http://wiki.selfhtml.org/wiki/Vh
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Hallo Matthias Apsel,
netter Vergleich, 100 Birnen sind nahrhaftes Obst, daher besser als Waschmaschinen. Die Angabe im html und und body sollte, so habe ich es mehrfach gelesen, besser 100% und nicht 100vh sein. Bei meinen Versuchen konnte ich bisher keinen Unterschied feststellen, daher meine Frage.
mfG Detlef
-
Hallo Detlef Mietke,
Die Angaben
html, body { height: 100vh; }html, body { height: 100%; }sind gleichwertig und oft auch unnötig bzw. unsinnig. Denn sie sind meist nur notwendig, um Nachfolgeelementen eine prozentuale Höhe ihres Vorfahrenelements geben zu können. Darauf sollte man aber verzichten, weil die Höhenanpassung ohne weiteres Zutun automatisch nach dem Inhalt erfolgt.
Wird entweder für das
html- oderbody-Element ein Hintergrund festgelegt, gilt diese Angabe für den kompletten Viewport, das heißt um den Bildschirm komplett mit dem Hintergrund zu füllen, benötigt man die Höhenangaben nicht.Der Unterschied ist, dass alte Browser die Viewporteinheiten nicht kennen.
Schauen wir uns den Code mal genauer an:
html { height: 100%; } /* Genau so hoch wie das Elternelement, das es aber nicht gibt ⇒ so hoch wie der Viewport */ body { height: 100%; } /* Genau so hoch wie das Elternelement ⇒ so hoch wie das html-Element ⇒ so hoch wie der Viewport */ html { height: 100vh; } /* Genau so hoch wie der Viewport ⇒ so hoch wie der Viewport */ body { height: 100vh; } /* Genau so hoch wie der Viewport ⇒ so hoch wie der Viewport */Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
@@Matthias Apsel
sind gleichwertig und oft auch unnötig bzw. unsinnig. Denn sie sind meist nur notwendig, um Nachfolgeelementen eine prozentuale Höhe ihres Vorfahrenelements geben zu können. Darauf sollte man aber verzichten, weil die Höhenanpassung ohne weiteres Zutun automatisch nach dem Inhalt erfolgt.
In diesem Beispiel stimmt es so nicht ganz:
/* Das funktioniert auch ohne html height Angabe */ body { height: 100vh; } /* Das funktioniert nicht ohne html height 100 %||vh Angabe */ body { height: 100%; }und im speziellen Fall dieses Beispiel ist es entscheidend ob der header fixiert ist oder mitscrollt.
Der Unterschied ist, dass alte Browser die Viewporteinheiten nicht kennen.
und auch sonst von html5 und css3 kaum einen Schimmer haben ;-)
gr qx
-
Hallo,
@@Matthias Apsel
/* Das funktioniert nicht ohne html height 100 %||vh Angabe */ body { height: 100%; }
und im speziellen Fall dieses Beispiel ist es entscheidend ob der header fixiert ist oder mitscrollt.die Erfahrung habe ich auch gemacht, ohne eine Angabe zu height scrollte der header immer mit und der Scrollbalken war am rechten Rand des viewports.
mfG Detlef
-
Hallo Detlef Mietke,
/* Das funktioniert nicht ohne html height 100 %||vh Angabe */ body { height: 100%; }
und im speziellen Fall dieses Beispiel ist es entscheidend ob der header fixiert ist oder mitscrollt.die Erfahrung habe ich auch gemacht, ohne eine Angabe zu height scrollte der header immer mit und der Scrollbalken war am rechten Rand des viewports.
Das hat aber nichts mit der Fragestellung
vhvs.%zu tun und nur auf diese habe ich mich mit meiner Antwort (Birnen vs. Waschmaschinen) bezogen.Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Hallo,
Das hat aber nichts mit der Fragestellung
vhvs.%zu tun und nur auf diese habe ich mich mit meiner Antwort (Birnen vs. Waschmaschinen) bezogen.Wobei man aber vh in % umrechnen könnte, falls man alle Rahmenbedingungen kennte. Kannst du mir einen Weg schildern, wie man Birnen in Waschmaschinen umrechnete?
Gruß
Kalk-
Hallo Tabellenkalk,
Wobei man aber vh in % umrechnen könnte, falls man alle Rahmenbedingungen kennte.
Nice, schon seit Ewigkeiten keinen korrekten Konjunktiv mehr gesehen! 😀
LG,
CK
-
-
-
-
-
-
-
-
@@Detlef
Ich muss mich erst intensiver besonders mit dem Script beschäftigen, um ihn zu durchschauen.
Beim onload wird vom header die Höhe ermittelt
window.onload = function() { document.getElementsByTagName('main')[0].style.top = document.getElementsByTagName('header')[0].offsetHeight + 'px' }und mit diesen Wert der top Abstand von main nachgezogen.
Beide erhaltenen Vorschläge funktionieren wohl so, wie ich es mir vorstelle.
Der Vorschlag von MrMurphy1 ist näher bei deinem Ansatz, auch wenn ich nicht verstehe wie er funktioniert (flex: 1 0 1% ?). Bei meinem Ansatz ist der Scrollbalken rechts am Browserrand.
Wenn ich mein bestehendes Webprojekt mit einigen hundert Seiten entsprechend umgestalte, sollte es langfristigen Bestand haben.
Ohne Javascript Kenntnisse würde ich den Vorschlag von MrMurphy1 vorziehen, denn mein Beispiel ist nur quick&dirty und müsste verfeinert werden zB: onresize etc.…
Ich habe schon mehrfach gelesen, dass statt 100vh besser 100% verwendet werden soll - was ist nun wirklich empfehlenswert?
Dazu weiß vielleicht Gunnar etwas genaueres.
gr qx
-
Hallo
Beim onload wird vom header die Höhe ermittelt
window.onload = function() { document.getElementsByTagName('main')[0].style.top = document.getElementsByTagName('header')[0].offsetHeight + 'px'; }Kein wirklich gutes Beispiel, wie du ja selbst schon angemerkt hast.
Anstelle des load-Events, das erst feuert, wenn wirklich alle Ressourcen vollständig geladen sind, sollte hier besser das DOMContentLoaded-Event als Einstiegspunkt genutzt werden.
Denn je nach Inhalt kann durchaus ein merklicher Zeitunterschied bestehen und Änderungen im Layout würden erst erfolgen, wenn die Seite bereits zur Anzeige gebracht wurde, was sich negativ auf die UX auswirken dürfte.
Um sicherzugehen, dass das Stylesheet zum Zeitpunkt des Event-Dispatch fertig geladen und angewandt ist, sollte das Script grundsätzlich am Ende von Body eingebunden werden.
Außerdem sollten Handlerfunktionen nicht als Objekteigenschaften hinterlegt, sondern als Callback der addEventListener-Methode übergeben werden.
Gerade wenn jemand noch nicht so vertraut ist mit JavaScript und den Tücken des Eventhandlings, ist denke ich die Gefahr sehr groß, dass der Eigenschaftswert überschrieben wird, da dem TO vielleicht einfällt, dass er noch ein paar mehr Funktionen ausführen möchte, wenn die Seite geladen ist.
Darum besser:
document.addEventListener('DOMContentLoaded', function ( ) { // ... });Oder:
var myCallback = function ( ) { // ... }; document.addEventListener('DOMContentLoaded', myCallback);Aber das weißt du ja selbst… ;-)
Gruß,
Orlok
-
@@quincunx
Ich habe schon mehrfach gelesen, dass statt 100vh besser 100% verwendet werden soll - was ist nun wirklich empfehlenswert?
Dazu weiß vielleicht Gunnar etwas genaueres.
Einen Link hat er: Viewport vs Percentage Units
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein. -
Hallo,
Beim onload wird vom header die Höhe ermittelt und mit diesen Wert der top Abstand von main nachgezogen.
danke für die JS-Funktionsinfo.
Der Vorschlag von MrMurphy1 ist näher bei deinem Ansatz, auch wenn ich nicht verstehe wie er funktioniert (flex: 1 0 1% ?). Bei meinem Ansatz ist der Scrollbalken rechts am Browserrand.
die 1% fielen mir auch sogleich auf, ich nehme an, das ist ein Schreibfehler. Ich habe auf flex: 1 0 100%; geändert und das Ergebnis bleibt in allen von mir geprüften Browsern unverändert richtig.
Ohne Javascript Kenntnisse würde ich den Vorschlag von MrMurphy1 vorziehen, denn mein Beispiel ist nur quick&dirty und müsste verfeinert werden zB: onresize etc.…
etwas JS-Kennnisse für eine intern funktionierende Schlagwortsuche und einfachere Funktionen habe ich, aber nicht so spezielle. Vielleicht gelingt es mir mich in die hier gegebenen Hinweise einzuarbeiten.
mfG Detlef
-
Hallo
die 1% fielen mir auch sogleich auf, ich nehme an, das ist ein Schreibfehler.
Nein, kein Schreibfehler.
Gruss
MrMurphy
-
Hallo MrMurphy,
Nein, kein Schreibfehler.
kann ich inzwischen bestätigen, zeigte sich aber erst, nachdem ich vor der Überprüfung in den Browsern diese zuvor geschlossen habe. Ist der flex-basis Wert größer, werden die Items bei großem viewport untereinander dargestellt.
Mit Dank und freundlichem Gruß
Detlef
-
-
-
-
-