kartoffelsack: css: divs oben und unten mit absoluter Höhe, in der mitte den Re

SELF-Forum

css: divs oben und unten mit absoluter Höhe, in der mitte den Re

kartoffelsack
– Informationen zu den Bewertungsregeln

Hab ne Seite mit header-Zeile, footer-Zeile und dem Content dazwischen, möchte wenn möglich kein table-Layout machen:

<div style="position:absolute; top:0px; left:0px; width:100%; height:10%; z-index:0; background-color:green;">
 <p>head</p>
</div>

<div style="position:absolute; top:10%; left:0px; width:100%; height:80%; z-index:0; background-color:red;">
 <p>content</p>
</div>

<div style="position:absolute; top:90%; left:0px; width:100%; height:10%; z-index:0; background-color:blue;">
 <p>body</p>
</div>

Bei dieser Darstellung ist das Problem, dass beim vergrößtern/verkleinern des Fensters, alle drei Bereiche entsprechend vergrößert/verkleinert werden. Was ich aber möchte, ist, dass Header und footer z.B. immer 20px hoch sind, und der Content den restlichen Bereich einnimmt. Wie krieg ich das hin?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. css: divs oben und unten mit absoluter Höhe, in der mitte den Re

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    möchte wenn möglich kein table-Layout machen:

    aber du willst ein "papierlayout" in hypertext-dokumenten umsetzen ...

    Bei dieser Darstellung ist das Problem, dass beim vergrößtern/verkleinern des Fensters, alle drei Bereiche entsprechend vergrößert/verkleinert werden.

    works as designed

    Was ich aber möchte, ist, dass Header und footer z.B. immer 20px hoch sind, und der Content den restlichen Bereich einnimmt. Wie krieg ich das hin?

    wenn du wirklich unsinniges vollbringen willst: bitte

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. css: divs oben und unten mit absoluter Höhe, in der mitte den Re

      kartoffelsack
      – Informationen zu den Bewertungsregeln

      Sorry, was ist daran unsinnig??? Es handelt sich um eine Web-Applikation. Oben Menü, unten status-Leiste.

      Wie würde man das im 'hypertest-layout' machen?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. css: divs oben und unten mit absoluter Höhe, in der mitte den Re

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Sorry, was ist daran unsinnig??? Es handelt sich um eine Web-Applikation. Oben Menü, unten status-Leiste.

        ein von dir gewünschtes layout impliziert, dass dir die größe des inhalts sowie die größe des ausgabemediums bekannt sind - ansonsten sieht das schnell "scheisse" aus - eine fusszeile die am unteren rand des "monitors" klebt, sieht etwas komisch aus (den screenshot hast du ja gesehen) - das ist ein do-not, weil es den lesefluss stört

        Wie würde man das im 'hypertest-layout' machen?

        hypertext ...

        genauso wie wenn du es auf endlospapier drucken würdest

        bei endlospapier wird die fusszeile auch einfach "hinten dran" gehängt und nicht ans ende der papierrolle bzw des papierstapels

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. css: divs oben und unten mit absoluter Höhe, in der mitte den Re

          kartoffelsack
          – Informationen zu den Bewertungsregeln

          eine fusszeile die am unteren rand des "monitors" klebt, sieht etwas

          Es handelt sich aber um eine Status-Leiste und der Context ist kein fortlaufender Text, den man von oben nach unten liest.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. css: divs oben und unten mit absoluter Höhe, in der mitte den Re

            kartoffelsack
            – Informationen zu den Bewertungsregeln

            eine fusszeile die am unteren rand des "monitors" klebt, sieht etwas

            Es handelt sich aber um eine Status-Leiste und der Context ist kein fortlaufender Text, den man von oben nach unten liest.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. css: divs oben und unten mit absoluter Höhe, in der mitte den Re

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@kartoffelsack:

    Was ich aber möchte, ist, dass Header und footer z.B. immer 20px hoch sind, und der Content den restlichen Bereich einnimmt. Wie krieg ich das hin?

    Für Browser und IE ≥ 7:

    <!DOCTYPE html  
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  

>  

<html  
    xmlns="http://www.w3.org/1999/xhtml"  
    xml:lang="und" lang="und"  

>  

    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>Lorem ipsum</title>  
    </head>  
    <body>  
        <div id="pagehead">Lorem ipsum</div>  
        <div id="pagebody">  
            <p>Lorem ipsum dolor sit amet.</p>  
        </div>  
        <div id="pagefoot">Lorem ipsum</div>  
    </body>  
</html>

    html, body  
{  
    height: 100%;  
    margin: 0;  
    padding: 0;  
}  
  
#pagehead, #pagebody, #pagefoot  
{  
    position: absolute;  
    left: 0;  
    width: 100%;  
}  
  
#pagehead  
{  
    top: 0;  
    height: 20px;  
    background: #F66;  
}  
  
#pagebody  
{  
    top: 20px;  
    bottom: 20px;  
    background: #6F6;  
    overflow: auto;  
}  
  
#pagefoot  
{  
    bottom: 0;  
    height: 20px;  
    background: #66F;  
}

    Live long and prosper,
    Gunnar

    --
    Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln