Matze: Blockhöhen

SELF-Forum

Blockhöhen

Matze
– Informationen zu den Bewertungsregeln

Hallo Leute,
habe NOCH ein Problem, bei dem ichs aufgeb weiter zu suchen, und euch mal frag:

Habe mehrere divs, also untereinander, und zwar als 1. Kindelemente von body:

<body>  
<div id="hallo">  
</div>  
<div id="du">  
</div>  
<div id="da">  
</div>  
<div id="wie">  
</div>  
<div id="gehts">  
</div>  
<div id="dir">  
</div>  
</body>

Wie geht das jetzt, dass gilt:
#hallo ist absolut (position: absolute;) (Header), Höhe von #du ist variabel, Höhe von #da ist fest, Höhe von #wie ist variabel, Höhe von #gehts ist fest, #dir ist wiederum absolut (Footer) ... also immer je nachdem, wie groß das Fenster ist, besser gesagt gezogen wird (#du, #da, #wie und #gehts nehmen zwischen #hallo und #dir die volle Höhe ein und beim Ziehen bleiben Header und Footer an den Fensterrändern und variable divs werden größer bzw. kleiner)

Jemand ne Ahnung, wie's gelöst werden könnte?
Danke im Voraus!!
Matze

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Blockhöhen

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, Matze!

    Habe mehrere divs, also untereinander, und zwar als 1. Kindelemente von body:

    <body>

    <div id="hallo">
    </div>
    <div id="du">
    </div>
    <div id="da">
    </div>
    <div id="wie">
    </div>
    <div id="gehts">
    </div>
    <div id="dir">
    </div>
    </body>

      
besser, damit ichs verstehe  
  
<body>  
  <header>  
  <div inhalt1>  
  <div inhalt2>  
  ...  
  <footer>  
</body>  
  
#1# Inhalte nach vorn  
#2# header und footer fix positionieren  
#3# passende margins für body  
#4# Inhalte in ein gruppierendes Element  
#5# den einzelnen Inhalten passende Höhen geben  
  
oder  
  
#4a# gruppierendes Element display: table; + höhe  
#5a# einzelne Inhalte display: table-cell;  
  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Blockhöhen

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz, Matthias Apsel!

      <!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <style type="text/css">  
	  
	* {margin: 0; padding: 0;}  
	  
        html {margin:0; padding:0; height: 100%;}  
	body {margin: 5em auto; width: 80%; height: -moz-calc(100% - 10em - 2px); border: 1px solid transparent;}  
			  
						  
	p {border:1px solid transparent; background: gold; border-radius: 1em; margin-bottom: 1%; height: -moz-calc(23.75% - 4px);}  
	p:first-child {margin-top: 1%}  
			  
	  
        header, footer {position: fixed; margin: 0; height: 5em; background: red; width: 100%; left:0;}  
	header {top:0;}  
	footer {bottom: 0;}  
			  
    </style>  
    <title>Test</title>  
</head>  
<body>  
  <p>Inhalt 1</p>  
  <p>Inhalt 2</p>  
  <p>Inhalt 3</p>  
  <p>Inhalt 4</p>  
  <header>header</header>  
  <footer>footer</footer>  
</body>  
</html>

      Beispielsweise so. Die transparenten border sind dazu da um die collapsing margins auszutricksen. Interessanterweise rendert FF10 im maximierten Fenster anders als in einem Browserfenster mit derselben Höhe.

      Matthias

      --
      1/z ist kein Blatt Papier.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Blockhöhen

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Matthias Apsel:

        nuqneH

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        Sie meinen <meta charset="utf-8">?

        <style type="text/css">

        Sie meinen <style>?

        Qapla'

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

        1. Blockhöhen

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Om nah hoo pez nyeetz, Gunnar Bittersmann!

          Sie meinen ...

          Ja, so ist das, wenn man sich nur schnell eine Vorlage greift.

          Matthias

          --
          1/z ist kein Blatt Papier.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln