height: 100%; funktioniert nicht!?

DarkEmperor

Hey ho,
das erste mal seit Ewigkeiten das ich mal wieder ne CSS-Frage habe, aber ich weiß nicht mehr weiter!
Es geht, wie der Titel schon sagt, darum das auf meiner Website (http://tkw.bplaced.de) die CSS-Eigenschaft { height: 100%; } einfach nicht funktionieren will, auf manchen Seiten verstehe ich es da ich da den Inhalt in { position: absolute; } <div>s gepackt habe, aber gerade bei den Seiten wo es mir echt wichtig wäre verstehe ich es nicht, am meisten hier: http://blog.tkw.bplaced.de da ich da nur mit padding arbeite um die <div>s zu positionieren. Hat jemand eine Idee wie ich den Bereich, der im Quelltext auch mit "" gekennzeichnet ist so hinbekomme das ich mir das ganze height anpassen per JS, was erstens auch seine Grenzen hat, gerade bei den Blogeinträgen und erst Recht bei den Kommentare dazu (geplant) und zweitens mehr als nervig ist?
Von mir aus änder ich auch die ganzen position: absolute; Atribute und so aber wäre schön wenn sich irgendwas findet womit ich die <div> so hoch machen lassen kann wie es sein muss ohne zu wissen wie hoch der Inhalt ist -> Variable Inhalte (Blogeinträge, Kommentare, etc.).

Schon einmal Danke im Voraus, falls ihr Konkrete Codes im Original haben wollt einfach nachfragen!

MfG

Grevas

Erstmal: geb dir das nächste mal etwas mehr Mühe beim Ausformulieren deines Anliegens. Kriegt man ja Kopfschmerzen beim Lesen.

Zweitens: überlege, worauf sich prozentuale Angaben beziehen. Ach, egal:
1. ein Absolut positioniertes Element wird nicht von anderen Elementen beeinflusst (Ausnahme: Positionierung innerhalb eines relativ positionierten Elements) -> prozentuale Angaben ergeben 0.
2. Um z.B. die Höhe 'durchzuschleifen' müssen alle Parent-Elemente eine entsprechende Höhe haben (bei dir: body, #background) - und dürfen ebenfalls nicht absolut Positioniert sein.
3. So ein Layout muss vorher schon gut überlegt sein, du wirst garantiert Probleme mit deinem Header / Footer bekommen wenn du den #content Bereich auf '100%' stellst (die Seite wird immer zu lang sein). Aber auch wenn der Content am Ende nur ~80% bekommt - es ist nicht auszuschließen, dass dein Header / Footer zerschossen werden, da sie nicht für prozentuale Höhe ausgerichtet sind.

Hier kann man aber etwas Tricksen um das zu erreichen. Z.B. gibt man dem Content die Höhe des Headers als padding-top, den Footer zieht man über den Content-Bereich (nicht vergessen, einen entsprechenden padding-bottom einzurichten, sonst wird der Inhalt abgeschnitten).
Oder man lebt eben mit der Tatsache, dass die Seite immer etwas zu lang oder zu kurz ist. Darfst dann selbst durchprobieren ;P

//P.S. wie auch immer du es hingekriegt hast, aber mein Firebug mag die Seite überhaupt nicht und zeigt die Elemente beim Hovern falsch an.

//PP.S. aus reiner Kuriosität, wie kommst du dazu für 'Webdesigner' ein Terminalicon und für 'Fotograf' eine 0815 Videocam zu nehmen? Zugegeben, mit Lichttechnik verbinde ich auch etwas anderes als ein Stromstecker

DarkEmperor

Ok, bedeutet im Umkehrschluss: um das Design so zu gestalten das der Content eine variable Höhe bekommen kann muss ich:

alle postion: absolute; raus nehmen und durch position:relative; ersetzen?
- kann ich auch den background nicht absolut positionieren?
- wenn ja, wie bekomme ich dann die <div> trotzdem mittig?
den footer so zu positionieren das er als Bezug die Unterkante des Content nimmt?
- wie bekomme ich das am besten hin? einfach per padding-top oder nimmt er wenn ich nichts mehr absolut positioniere trotzdem etwas anderes als Bezug als die Unterkante des Content?
und jetzt die große Preisfrage, welche height-Angabe muss ich für den Content setzen?

Sry, aber mit den position Eigenschaften habe ich mich noch nie so konkret befasst da ich noch nicht so variable Seiten hatte.

An das PS: Ich weiß es auch nicht!? Was genau macht er denn falsch?^^
An das PPS: Danke für die Kritik, um ehrlich zu sein war das einfach das Beste was ich in einem freien, zusammengehörigen Icon-Set gefunden habe. Sonst habe ich meistens nur ein paar gefunden aber nie für alle was. Falls du da noch eine gute Idee für mich hast dann bin ich für Vorschläge offen.

Aber am wichtigsten ist mir was ich alles ändern muss damit der Content von 0-100+ Zeilen und Bilder und so haben kann und die <div> sich trotzdem immer automatisch anpasst und gleichzeitig den footer mit runter schiebt!?

Ich danke dir auf alle Fälle schon einmal für deine Hilfe!

MfG

Grevas

22:08: ich starte Komodo, ich mach dir ma n basis-Template fertig...
22:22 Template done

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Dummy Template</title>
  <style type="text/css">
    html, body { height: 100%; padding: 0; margin: 0; }
    #wrapper { position: relative; height: 100%; width: 1000px; margin: auto; }
    #header { position: relative; height: 100px; background: #ccc; z-index: 2; }
    #content { margin-top: -100px; min-height: 69%; background: #999; padding: 100px 0 80px; overflow: visible; }
    #footer { margin-top: -80px; height: 80px; background: #ccc; }
    #test { height: 1200px; background: yellow; }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      Dummy-Header
    </div>
    <div id="content">
      Dummy-Content
      <div id="test" onclick="javascript:this.style.display = 'none';">Dummy-Longdiv (click to hide)</div>
    </div>
    <div id="footer">
      Dummy-Foter
    </div>
  </div>
</body>
</html>

Alles anzeigen

Die Angabe für min-height musst du selbst austesten bei deinen Werten. Wie gesagt, das kann nicht perfekt sein, solang man für Footer / Header absolute Werte (in z.B. px) angibt.

Zitat

kann ich auch den background nicht absolut positionieren?

Solang dein Inhalt darin ist, nein.

Damit so was aber wirklich sauber funktioniert, muss Header / Footer ebenfalls prozentualle angaben haben... Sonst ist das nur n just 4 fun feature ;P

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Dummy Template</title>
  <style type="text/css">
    html, body { height: 100%; padding: 0; margin: 0; }
    #wrapper { position: relative; height: 100%; width: 1000px; margin: auto; }
    #header { position: relative; height: 15%; background: #ccc; z-index: 2; }
    #content { min-height: 75%; background: #999; overflow: visible; }
    #footer { height: 10%; background: #ccc; }
    #test { height: 600px; background: yellow; }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      Dummy-Header
    </div>
    <div id="content">
      Dummy-Content
      <div id="test" onclick="javascript:this.style.display = 'none';">Dummy-Longdiv (click to hide)</div>
    </div>
    <div id="footer">
      Dummy-Foter
    </div>
  </div>
</body>
</html>

Alles anzeigen

alxy

Bei mir hat die Seite (zumindest beim Erstaufruf) eine_extrem_schlechte Seitenaufbauzeit!

Außerdem finde ich die Hintergrundfarbe (grau) nit gut gewählt.

Grevas

Zitat von alxy

Bei mir hat die Seite (zumindest beim Erstaufruf) eine_extrem_schlechte Seitenaufbauzeit!

Außerdem finde ich die Hintergrundfarbe (grau) nit gut gewählt.

Ich glaube, darum ging es nicht. Oder?

So, um es nicht als P.S. in mein letzten Beitrag reinzuhaun, hier:

Die einzige mir bekannte Möglichkeit, prozentuale und absolte Werte (vernünftig) zu mixen ist mit Tabellen. Siehe:

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Dummy Template</title>
  <style type="text/css">
    html, body { height: 100%; padding: 0; margin: 0; }
    #wrapper { height: 100%; width: 1000px; margin: auto; }
    #header { height: 100px; background: #ccc; }
    #content { height: 100%; background: #999; }
    #footer { height: 80px; background: #ccc; }
    #test { height: 1200px; background: yellow; }
  </style>
</head>
<body>
  <table id="wrapper">
    <tr>
      <td id="header">Dummy-Header</td>
    </tr>
    <tr>
      <td id="content">
        <p>Dummy-Content</p>
        <div id="test" onclick="javascript:this.style.display = 'none';">Dummy-Longdiv (click to hide)</div>
      </td>
    </tr>
    <tr>
      <td id="footer">Dummy-Foter</td>
    </tr>
  </table>
</body>
</html>

Alles anzeigen

alxy

Da hast du recht, dass es nicht darum geht... Ich wollte es nur von vornherein anmerken, da er seine Webseite ja noch ausbauen und/oder optimieren will
Und wenn ein potentieller Kunde schon 10Sekunden auf einen seitenaufbau warten muss, dann wäre das bei mir gleich der erste Minuspunkt! Vorallem da nicht klar ersichtlich ist, warum dort überhaupt eine so lange Ladezeit entsteht (bei einer recht einfachen seite).

Grevas

1. Da wird es wohl kaum 'Kunden' geben.
2. Schau dir die Domain mal genauer an. (bplaced.de, klingelts?)
3. Farben sind Geschmackssache, ich hab auch ein Shop gebaut, bei ist die dominante Farbe Schwarz / Grau. Haben zwar einige Bemängelt, aber das gehört nun mal zu der Marke (in dem Fall eben).

alxy

1. Was nicht ist kann ja noch werden? Worauf soll die Präsenz sonst abzielen?
2. Zum Aufbau würde ich auch in keine Toplevel-Domain investieren Wozu auch, gibt ja kostenlose Alternativen....
3. Das grau passt, meiner Meinung nach, nicht zum Design des Containers. Ist aber wie gesagt geschmackkssache.

Grevas

1. Angeben vor Freunden, anderen sein 'können' demonstrieren. Was weiß ich, gibt ja auch so was wie Blogs
2. Wenn man's hat, hat mans halt. Ich hab ne Toplevel auf der nix läuft, nutze es auch nur um Sachen hochzuschubsen und sie irgendwo zu verbreiten (Screens, Beispiele, usw.). Theoretisch würde mir auch n Kostenloser anbieter reichen, würde mich aber zu oft nerven (wie eben hier, miese Performance)
3. och, da köma uns streiten. Ich finde es bietet ein guten Kontrast und lenkt erfolgreich auf den Inhalt *g*.
Also, wie man sieht, sind wir unterschiedlicher Meinungen - und das ist auch gut so. Ich klink mich jetzt dann auch wirklich aus, bis eine neue Frage kommt

DarkEmperor

Grevas: Ich bedanke mich ganz herzlich für den fertigen Code!!! Das erste Beispiel war für meinen Bedarf schon das Beste, und es läuft super, also ich kann mich echt nicht beschweren, ist auch mehr als Variabel und anpassbar, ich habe es noch ein klein wenig verändert und schon siehts eigentlich genauso aus wie mein Design, nur auf die Sidebar muss ich bis jetzt verzichten, was aber nicht schlimm ist da ich eh lieber ne Topbar haben wollte!^^

Meine abgeänderte Version sieht jetzt so aus:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Test |  Tom Witkowski</title>


  <style type="text/css">
    html, body { height: 100%; padding: 0; margin: 0; }
    #wrapper { height: 100%; width: 1000px; margin: auto; }
    #header { margin-top: 40px; height: 100px; background: #ccc; z-index: 2; }
    #content { margin-top: 10px; min-height: 5%; background: #999; border: 1px solid #000000; overflow: visible; }
#footer { margin-top: 10px; height: 80px; background: #ccc; }
  </style>
</head>


<body>


<div id="wrapper">
    <div id="header">
      Dummy-Header
    </div>
    <div id="content">
      Dummy-Content<br>jkebfjffb<br>jkgdsbsfjkgb<br>hjkbjksgbf<br>jgksbjkrgb <span id="test1" onclick="javascript:getElementById('more1').style.display = 'inline'; javascript:getElementById('test1').style.display = 'none';">mehr</span>
	  <span id="more1" style="display: none;">bcvsafjkefsdbfbwejkbfqbejkfbejkf kwejnfg asjkbfjkqweghrf e<br>whtfghsklfvklw hflkneklfweil fhweh</span>
	  <hr>
	  Dummy-Content<br>jkebfjffb<br>jkgdsbsfjkgb<br>hjkbjksgbf<br>jgksbjkrgb <span id="test2" onclick="javascript:getElementById('more2').style.display = 'inline'; javascript:getElementById('test2').style.display = 'none';">mehr</span>
	  <span id="more2" style="display: none;">bcvsafjkefsdbfbwejkbfqbejkfbejkf kwejnfg asjkbfjkqweghrf e<br>whtfghsklfvklw hflkneklfweil fhweh</span>
    </div>
    <div id="footer">
      Dummy-Foter
    </div>
  </div>


</body>
</html>

Alles anzeigen

Der ganze Farbspaß und so fehlt natürlich noch, wollts nicht unnötig überladen, aber das ist ja jetzt nur noch Formsache.

Noch einmal ein ganz großes Dankeschön an dich, hast mir echt sehr weiter geholfen!

MfG

Grevas

Ay, gern geschehen. Dachte mir, es ist leichter dir das Basisding zu liefern, als es zu erklären *g*

Tags