Harald: div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

SELF-Forum

div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

Harald
– Informationen zu den Bewertungsregeln

Hi Leute!
Wer weiß Rat?
Wie bekomme ich aufeinander folgende div's im Wechsel fluid und fest, und zwar auch so, dass der IE mitspielt?
Wollts auch gern ohne nen leidigen Container-div machen. Hasse immer dieses "body (oder gar *) blooß erst mal auf margin: 0; und padding: 0; setzen und blooß erst mal einen Container-div machen (am besten auch noch auf margin: 0; und padding: 0; setzen) usw.". Der body ertreckt sich ja jetzt schon auf die Höhe vom Ende der Header-Linie bis zum Anfang der Footer-Linie (ohne height bzw. mit margin).
Ich habe schon mal so eine Seite gesehen und (!) das im IE.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">  
	<head>  
		<meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type" /> <meta content="application/xhtml+xml" name="dc.format" scheme="MIME" />  
		<title>Test</title> <meta content="Test" name="dc.title" />  
	</head>  
	<body style="margin: 22px 0 22px;">  
		<div style="position: fixed; top: 0; width: 100%; height: 20px; color: inherit; background-color: green;">  
			Header  
		</div>  
		<hr style="margin-top: 0; border: none; position: fixed; top: 20px; left: 0; width: 100%; height: 2px; color: inherit; background-color: darkgray;" />  
		<div style="color: inherit; background-color: yellow;">  
			Dieser Block soll in der H&#0246;he fluid sein (bei senkrechtem Ziehen des Browserfensters).  
		</div>  
		<div style="height: 50px; color: inherit; background-color: lightgray;">  
			Dieser Block soll seine H&#0246;he behalten.  
		</div>  
		<div style="color: inherit; background-color: yellow;">  
			Dieser Block soll in der H&#0246;he fluid sein (bei senkrechtem Ziehen des Browserfensters).  
		</div>  
		<div style="height: 40px; color: inherit; background-color: lightgray;">  
			Dieser Block soll seine H&#0246;he behalten.  
		</div>  
		<div style="color: inherit; background-color: yellow;">  
			Dieser Block soll in der H&#0246;he fluid sein (bei senkrechtem Ziehen des Browserfensters).  
		</div>  
		<div style="height: 30px; color: inherit; background-color: lightgray;">  
			Dieser Block soll seine H&#0246;he behalten.  
		</div>  
		<div style="color: inherit; background-color: yellow;">  
			Dieser Block soll in der H&#0246;he fluid sein (bei senkrechtem Ziehen des Browserfensters).  
		</div>  
		<hr style="margin-bottom: 0; border: none; position: fixed; bottom: 20px; left: 0; width: 100%; height: 2px; color: inherit; background-color: darkgray;" />  
		<div style="position: fixed; bottom: 0; width: 100%; height: 20px; color: inherit; background-color: green;">  
			Footer  
		</div>  
	</body>  
</html>

Gruß Harald

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Harald:

    nuqneH

    Wie bekomme ich aufeinander folgende div's im Wechsel fluid und fest, und zwar auch so, dass der IE mitspielt?

    Absolute Positionierung in Prozent und negative margins in Pixel?

    Wie passt „dass der IE mitspielt“ mit "application/xhtml+xml" zusammen?

    Oder steht das nur so zum Spaß da, und per HTTP lieferst du das als "text/html" aus? In dem Fall solltest du die Sprache per @lang-Attribut angeben. [qa-html-language-declarations] (Übersetzung in Arbeit)

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

      Harald
      – Informationen zu den Bewertungsregeln

      und per HTTP lieferst du das als "text/html" aus?

      Jo

      In dem Fall solltest du die Sprache per @lang-Attribut angeben.

      lang="" ist ja in XHTML 1.1 leider nicht valide ... dafür eben xml:lang="".

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Harald:

        nuqneH

        lang="" ist ja in XHTML 1.1 leider nicht valide ... dafür eben xml:lang="".

        Die Diskussion hatten wir schon mal.

        [qa-html-language-declarations] sagt: „Wenn Sie XHTML 1.x oder polyglotte HTML5-Dokumente als text/html ausliefern, verwenden Sie sowohl das lang-Attribut als auch das xml:lang-Attribut bei jeder Sprachangabe.“

        1.x; x kann auch 1 sein.

        Validität sollte nicht zum Selbstzweck verkommen.

        Warum verwendest du überhaupt XHTML 1.1 und nicht XHTML 1.0 Strict oder am besten XHTML5?

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

          Harald
          – Informationen zu den Bewertungsregeln

          [qa-html-language-declarations] sagt: „Wenn Sie XHTML 1.x oder polyglotte HTML5-Dokumente als text/html ausliefern, verwenden Sie sowohl das lang-Attribut als auch das xml:lang-Attribut bei jeder Sprachangabe.“

          OK!
          Validator akzeptiert mittlerweile sogar bei XHTML Basic 1.1 lang="". Hatte noch eine Zeit in Erinnerung, in der das nicht so war ;).
          Habe jetzt auch lang="" eingebunden.
          Danke für die Anregung.

          Warum verwendest du überhaupt XHTML 1.1 und nicht XHTML 1.0 Strict

          S. o.

          oder am besten XHTML5?

          Gut und schön, doch damit kann ja der IE 8 von Haus aus nix anfangen, also zwar mit XHTML Syntax, aber nicht mit HTML 5.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

    2. div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

      Harald
      – Informationen zu den Bewertungsregeln

      Absolute Positionierung in Prozent und negative margins in Pixel?

      Was ist denn wie absolut zu setzen, weils ja immer von links oben des übegeordneten Elements losgeht? body oder fluide div's (oder beides)?
      Und was in Prozent? Theoretisch die fluiden div's, also: bei 4 fluiden div's je 25%!
      Es haut jedoch bei mir in keiner Variante hin!! :/

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. div Höhen im Wechsel fluid und fest (überhaupt lösbar?)

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, Harald!

    Hasse immer dieses "body (oder gar *) blooß erst mal auf margin: 0; und padding: 0; setzen

    Wenn du auf inline-style-Angaben verzichten würdest, sehest du deutliche Vorteile:

    Nur mal so als Denkanstoß:

    div {margin: 0; padding: 0; background-color: lightgrey; height: Pixelangabe;}
    .header, .footer {height: ...; position: fixed; }
    .header {top: 0;}

    .fluid {background-color: yellow; height: Prozentangabe}

    color: inherit ist überflüssig, denn diese Eigenschaft wird von selbst vererbt
    die hr ist wohl besser border-bottom des header

    Für HTML5 kannst du auf .header und .footer verzichten, es gibt entsprechende Elemente

    Für moderne Browser ist auch der Verzicht auf die Klasse fluid möglich, es gibt :nth-child(odd)

    Matthias

    --
    1/z ist kein Blatt Papier.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln