DIV 100% horiz. füllen, auch bei scrollen

[fabio]

Okay, sorry für den etwas wirren Titel.
Ich weiss nicht wie ich das besser beschreiben könnte in einem Satz.

Es geht darum, dass ich einen Header und Footer habe, welche beides schwarze DIVs sind die 100% breite bekommen haben per CSS.

Das passt auch ganz gut solange man nicht vertikal scrollen muss.
Sobald es aber ein Element hat, welches eine feste Grösse hat (zB ein Bild mit 800px Breite) und dieses das Browserfenster zwingt zu scrollen, wird die 100% Angabe vom DIV nur auf das Browserfenster gemessen und nicht auf die "effektive Breite der Homepage".

Ich denke dies ist korrektes Verhalten von CSS, da 100% nunmal auf das Sichtbare im Browserfenster bezogen sind.

Ich habe einen kleinen Video gemacht vom Verhalten:
YouTube - CSS Unschönheit

Noch einige Angaben zum Code (lediglich den Container und den Header):

#container {
	min-height: 100%;
	position: relative;
	margin-left: 0;
	margin-right: 0;
	background-color: #ADF;
}

#header {
	background-color: #111;
	color: #EEE;
	padding: 10px;
	padding-top: 40px;
	border-bottom: 40px solid #FFF;
	letter-spacing: 1px;
	width: auto;
	right: 0px;
}

 <div id="container">
            <div id="header">
                NEW DESIGN
            </div>

... Restlicher Code

Die Seite ist als XHTML 1.0 Strict deklariert.

Wie gesagt, ich denke nicht, dass es ein "Fehler" vom Code ist, alles ist valide (HTML als auch CSS) und verhält sich wie es sollte.
Aber ich hätte gerne, dass die schwarzen Balken gestreckt werden auf das sichtbare und nicht nur das Browserfenster selbst.

Ich hatte bereits gedacht, ich könnte den Header und Footer in der Breite auf 4'000px definieren und irgendwie dafür sorgen, dass einfach diese beiden Elemente keine vertikalen Scrollleisten verursachen.
Aber irgendwie find ich einfach nicht heraus wie man das machen könnte. Bin wohl auch schon etwas zu müde, aber das beschäftigt mich gerade und lässt mich nicht los.

Weiss jemand wie ich das lösen könnte?

[AmicaNoctis]

Hallo,

das mit dem Video ist ja ganz nett gemeint, aber die 5 Zeilen HTML lassen nichts über die Struktur des Dokuments erkennen und das CSS ist gespickt mit Angaben, die irgendwie keinen so richtigen Sinn machen, weil sie vermutlich die Reste zahlloser Versuche sind.

Am besten wäre ein Onlinebeispiel, um es sich direkt anzusehen.

Gruß,

Amica

[fabio]

Ich hab es mal auf Dropbox geladen:
Link zum Beispiel

Du hast recht, im CSS hatte es noch viele andere Eigenschaften drin, die eigentlich nicht nötig sind (hauptsächlich die margin/padding: 0).
Ich hab die kurz mal aus dem CSS entfernt um es ein wenig übersichtlicher zu machen.

Ich habe vor dem Einschlafen noch etwas gedacht.
Den oberen Balken könnte ich mit einem background-image im Body machen, den unteren aber nicht, da der sich ja in der Position verändert.
Naja, es ginge relativ einfach auch beim unteren, aber dann fehlt die verflixte IE-Kompatibilität.

[AmicaNoctis]

Ok, jetzt sehe ich den Grund. Du verwendest absolute Positionierung, d. h. dass die auf diese Weise positionierten Elemente aus dem Flow genommen werden und deren effektive Größe damit unabhängig von den Elternelementen ist. Der body passt sich ja normalerweise seinen Kindern an, aber nur, wenn diese sich im Flow befinden.

Ich würde an deiner Stelle einfach mit float arbeiten und das div#trennlinie halte ich für eine schlechte Idee.

[fabio]

Okay werde ich am Nachmittag mal schauen.
Header, Navi und Content kann man mit float machen, machte ich Anfangs auch, dann aber durch endloses Ausprobieren wohl auf absolut gestellt.

Aber den Footer kann ich ja nicht mit float positionieren.
Damit der ganz unten am Browser ist, muss er ja mittels absolut positioniert sein.

[AmicaNoctis]

Aber den Footer kann ich ja nicht mit float positionieren.
Damit der ganz unten am Browser ist, muss er ja mittels absolut positioniert sein.

Das stimmt, also meinst du sowas?

[fabio]

Ja jein, erstmal danke für das Beispiel.

Leider passen mir zwei Sachen nicht, wobei sich beide eventuell lösen liessen durch Stylesheets.

Drucken geht bei deiner Demoseite gar nicht, zumindest nicht mit Safari und Firefox. Hier könnte ich zwar ein spezielles Print-CSS deklarieren, aber irgendwie habe ich mich mit der Idee noch nicht angefreundet.
Das andere ist das "inlinescrollen", damit haben Android/iPhone/iPad gar keine Freude, zumal auf so kleinen Bildschirmen ein fixierter Header/Footer nur unnötigen Platz wegnehmen. Auch hier könnte ich womöglich mit seperaten Stylesheets ein eignes Design für mobile Geräte machen.
Aber irgendwie finde ich geht das entgegen dem Sinn.
Eine normale/barrierenfreie Homepage sollte von allen Endgeräten mit dem gleichen Stylesheet korrekt anzeigbar sein, und nicht eben für jedes Gerät neu definiert werden.
Der Sinn von Android/iPhone ist ja gerade, dass sie "the real web" anzeigen, und keine spezielle "mobile-Version".


Was ich meinte, ist nicht, dass der Footer immer an unteren Browserrand ist (quasi fixed), sondern nur am Browserrand wenn genügend Platz vorhanden ist, und ansonsten mit dem Inhalt nach unten schieben.
Also in dieser Art:
Footer Demo 2
(die nutzen die gleiche/ähnliche Technik)
Leider sieht man auch da, dass wenn man vertikal zum scrollen kommt, der grüne Balken nicht ganz füllt.

Wie auch immer, Amica, ich habe bereits zu viel deiner Zeit beansprucht und will dich nicht noch mehr belästigen mit der Sache.
Ich habe mich vorhin mit der Grafikerin abgesprochen und für sie ist es auch in Ordnung, wenn ich die Adresse im Header anzeige. Das macht das ganze wesentlich einfacher.
Die Sache ist eben, dass die Homepage ziemlich kurzfristig fertig sein musste, letzten Freitag Besprechung gehabt und Montag in einer Woche sollte sie bereits online sein. Hätt ich genügend Zeit würde ich da natürlich schon nicht so schnell aufgeben, aber was solls, halb so schlimm.

Also, vielen Dank für deine Mühe