nicht angemeldet
fixen Header
Matthias Apsel
Gunnar BittersmannHallo,
Ich versuche gerade, ein HTML zu schreiben, bei dem der Header fix ist und der Content sich scrollen lässt.
Das hab ich mit dem Unteren code gemacht. Das einzige was mich stört ist, dass der Header rechts über den Scrollbalken drüber geht.
Meine Frage wäre jetzt, wie ich das verhindern kann?
Vielen Dank und beste Grüße,
Birgit
<html>
<head>
<style type="text/css">
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #f0f0f0;
font-family: Verdana, Arial, sans-serif;
}
#wrapper {
height:100%;
overflow:auto;
}
#wrapper #header {
position: absolute;
top: 0;
left:0;
width: 100%;
height:40px;
background: #CCE34A;
}
#wrapper #content {
margin-top: 70px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
100 % Höhe mit fixiertem Header und Footer
</div>
<div id="content">
<p>
Fülltext für den Content... <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
Content <br /><br /><br />
last Content <br /><br /><br />
</p>
</div>
</div>
</body>
</html>
-
Om nah hoo pez nyeetz, Birgit Egger!
Doctype nicht vergessen!
<html>
<head>Zeichenkodierung nicht vergessen!
<style type="text/css">
type ist in HTML5 hier nicht notwendig
body {
height: 100%;Das geht ggf. schief, weil das 100% Höhe des HTML-Elements bedeutet und dieses hat keine explizit angegebene Höhe also wird es so hoch wie nötig.
#wrapper {
Warum einen alles umschließendes Element? Es gibt schon 2. [1]#wrapper #header {
Der Selektor ist überspezifiziert. #header tuts auch [2]
position: absolute;
Für fixiert gibs fixed.
#wrapper #content {
dito([2])
<div id="wrapper">
Weg damit([1]).
<div id="header">besser: <header> und damit natürlich den Selektor [2] anpassen.
<div id="content">hier streiten sich noch die Geister: <main> wäre denkbar. Im CSS dann display: block;
<div id="content" role="main"> ist auch gut.Matthias
-
@@Matthias Apsel:
nuqneH
<div id="content">hier streiten sich noch die Geister:
Nein.
<main> wäre denkbar.
<main> ist angebracht.
<div id="content" role="main"> ist auch gut.
Zur Zeit noch <main role="main">.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
<div id="content">hier streiten sich noch die Geister:
Nein.
<main> wäre denkbar.
<main> ist angebracht.
<div id="content" role="main"> ist auch gut.
Zur Zeit noch <main role="main">.Kannst du dazu etwas mehr beitragen? Auch im Hinblick auf https://forum.selfhtml.org/?t=213685&m=1461221
Matthias
-
@@Matthias Apsel:
nuqneH
Kannst du dazu etwas mehr beitragen? Auch im Hinblick auf https://forum.selfhtml.org/?t=213685&m=1461221
Wenn das mal kein <I> ist … ;-)
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Kannst du dazu etwas mehr beitragen? Auch im Hinblick auf https://forum.selfhtml.org/?t=213685&m=1461221
Wenn das mal kein <I> ist … ;-)
Wenn du es so siehst und deine Zeit es hergibt, würde ich mich darüber natürlich freuen, aber mir würden auch einige Links und Stichpunkte reichen.
Matthias
-
-
-
-
-
Dein Beispiel fixiert den Header nicht, so wie ich das sehe.
Benutze position:fixed, wie in meinem Beispiel, dann kannst Du dir auch die Wrapper sparen.Cheers,
Baba -
So werden header und footer fix, der Inhalt wird mit dem normalen Scrollbalken ganz rechts gescrollt. Das schafft Bequemlichkeit für den Benutzer und löst Dein Problem:
<html> <head> <style type="text/css"> body, html { margin: 0; padding: 0; background: #f0f0f0; } #header { position: fixed; top: 0; left:0; width: 100%; height:40px; background: #CCE34A; z-index:999; } #content { padding-top: 50px; padding-bottom: 30px; } #footer { position: fixed; bottom: 0; left:0; width: 100%; height:20px; background: #CCE34A; z-index:999; } </style> </head> <body> <div id="header"> <h1>fixierter Header</h1> </div> <div id="content"> <script type="text/javascript> for (i=0; i<50; i++) { document.write ('<p>Lorem Ypsum, dolor si amet! Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet!</p>'); } </script> <div id="footer"> Footer </div> </body> </html>
