Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: height: 100%; funktioniert nicht!?

  1. #1
    Meister(in) Avatar von DarkEmperor
    Registriert seit
    23.04.2010
    Ort
    Freital
    Alter
    24
    Beiträge
    356
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    5

    Standard height: 100%; funktioniert nicht!?

    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 "<!-- Inhalt (center) -->" 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: height: 100%; funktioniert nicht!?

    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
    Geändert von Grevas (30.08.2011 um 17:09 Uhr)

  3. #3
    Meister(in)
    Themenstarter
    Avatar von DarkEmperor
    Registriert seit
    23.04.2010
    Ort
    Freital
    Alter
    24
    Beiträge
    356
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    5

    Standard AW: height: 100%; funktioniert nicht!?

    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

  4. #4
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: height: 100%; funktioniert nicht!?

    22:08: ich starte Komodo, ich mach dir ma n basis-Template fertig...
    22:22 Template done
    HTML-Code:
    <!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>
    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.

    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-Code:
    <!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>
    Geändert von Grevas (30.08.2011 um 23:27 Uhr)

  5. #5
    Samurai
    Registriert seit
    21.08.2011
    Beiträge
    233
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: height: 100%; funktioniert nicht!?

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

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

  6. #6
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: height: 100%; funktioniert nicht!?

    Zitat Zitat von alxy Beitrag anzeigen
    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-Code:
    <!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>
    Geändert von Grevas (30.08.2011 um 23:35 Uhr) Grund: unnötige CSS Anweisungen gekickt

  7. #7
    Samurai
    Registriert seit
    21.08.2011
    Beiträge
    233
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: height: 100%; funktioniert nicht!?

    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).

  8. #8
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: height: 100%; funktioniert nicht!?

    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).

  9. #9
    Samurai
    Registriert seit
    21.08.2011
    Beiträge
    233
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: height: 100%; funktioniert nicht!?

    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.

  10. #10
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: height: 100%; funktioniert nicht!?

    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

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 14.10.2010, 20:38
  2. Warum funktioniert im DIV height:100%; nicht?
    Von Darkxor im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 06.08.2010, 15:32
  3. Seite funktioniert und funktioniert nicht
    Von parcifal83 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 24.05.2010, 15:24
  4. Height:auto funktioniert bei verschachtelten DIVs nicht?
    Von markise im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 05.08.2009, 19:44

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •