mtm: Höhenangeben aus Prozent und Pixel kombiniert

SELF-Forum

Höhenangeben aus Prozent und Pixel kombiniert

mtm
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich weiß, dass es so einen ähnlichen Artikel schon mal gab, aber mein Problem ist doch ein klein wenig anders.
Ich möchte auf einer neu zu erstellenden Seite unter einen Seitenkopf von fester Höhe (180 px) ein div positionieren, dessen unterer Rand immer bis kurz über das untere Ende des Browserfensters gehen soll (c.a. 10px darüber), egal bei welcher Auflösung.
Ich frage mich jetzt, ob eine Formatierung per CSS wie

height:100%-190px

evtl. möglich ist. Vielleicht gibt es dafür auch einen komplett andere Lösung, die mir nur noch nicht eingefallen ist.

Danke im Voraus

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Höhenangeben aus Prozent und Pixel kombiniert

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@mtm:

    nuqneH

    Ich möchte auf einer neu zu erstellenden Seite unter einen Seitenkopf von fester Höhe (180 px) ein div positionieren

    Dann tu das – absolut. Mit entsprechenden Werten für 'top' und 'bottom'  .

    egal bei welcher Auflösung.

    Die Auflösung ist wirklci egal. Aber sowas von.

    Du meinst die Größe des Viewports (Browserfensterinneres).

    Qapla'

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

  2. Höhenangeben aus Prozent und Pixel kombiniert

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    ich weiß, dass es so einen ähnlichen Artikel schon mal gab, aber mein Problem ist doch ein klein wenig anders.
    Ich möchte auf einer neu zu erstellenden Seite unter einen Seitenkopf von fester Höhe (180 px) ein div positionieren, dessen unterer Rand immer bis kurz über das untere Ende des Browserfensters gehen soll (c.a. 10px darüber), egal bei welcher Auflösung.
    Ich frage mich jetzt, ob eine Formatierung per CSS wie

    height:100%-190px

    evtl. möglich ist. Vielleicht gibt es dafür auch einen komplett andere Lösung, die mir nur noch nicht eingefallen ist.

    Hier ist eine Lösung mit Prozentualen Werten.
    Du kannst auch Pixel einsetzen.
    Die Lösung hat aber einen wesentlichen Nachteil, weil sie absolut positioniert ist. Dazu verkleinerst du bitte das Fenster auf mobile Grösse.

    Persönlich bevorzuge ich Lösungen. die statisch positioniert sind, aber mit JS dann Klassen für ein anderes Layout umschalten.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Untitled</title>  
<style type="text/css">  
  html{ height:100%; min-height:100% }  
  body { height:100%; margin:0; position:relative; }  
  div { position:absolute; }  
</style>  
</head>  
<body>  
  <div style="background:green;top:0;height:10%;width:100%">Header</div>  
  <div style="background:red;top:10%;bottom:5%;width:100%">Main</div>  
  <div style="background:blue;bottom:0;height:5%;width:100%">Footer</div>  
</body>  
</html>

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln