1. #1
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard [CSS] Auto height

    Hallo,
    habe eine kleine Frage.

    Ich habe eine Div die auf height 100% gesetzt ist. Somit bedeckt sie ja den ganzen Bildschirm(vertikal). Mein Problem ist, dass
    wenn der Text über den Bildschirmrand hinausgeht, sich die Div nicht mitvergrößert.

    Zum Verständniss:

    HTML-Code:
    <html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    
    
    <div id="content">
    
    Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.
    Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.
    Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.
    Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.
    Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.
    Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.
    Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.
    Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.
    Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.
    
    
    </div>
    
    
    </body>
    </html>
    CSS:
    Code:
    body {
        margin: 0;
        padding: 0;
        background: #242424;
        text-align: center;
    }
    
    #content {
        width: 750px;
        height: 100%;
        background: #FFFFFF;
        margin: 0 auto;
        border-left: 1px solid #999999;
        border-right: 1px solid #999999;
        font-size: 36px;
    }
    Preview zu Demozwecken: http://dope.bplaced.net/new/

    Im Google habe ich eigentlich nicht wirklich was hilfreiches gefunden.

    MfG

    Moderator-Hinweis: Quellcode bitte zukünftig direkt im Thread mit dem code-Tag posten und nicht verlinken!

  2. #2
    Avatar von Snees
    Registriert seit
    18.11.2011
    Beiträge
    1.001
    Thanked 590 Times in 319 Posts

    Standard AW: [CSS] Auto height

    Ich verstehe nicht was du meinst, sieht bei mir so aus:

    Klicke auf die Grafik für eine größere Ansicht 

Name:	Unbenannt.JPG 
Hits:	489 
Größe:	224,4 KB 
ID:	318

  3. #3
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard AW: [CSS] Auto height

    Schau jetzt nochmal. Hab ein bisschen Text hinzugefügt.

    Es geht mir einfach darum das die Div mit der height nicht "mitgeht".
    Die height ist zwar auf 100% gestellt aber sobald sich der Text nicht
    mehr ausgeht und man scrollen muss, verhaltet sich die Div, als hätte
    sie eine fixe height zugewiesen bekommen.

  4. #4

    Registriert seit
    18.12.2011
    Beiträge
    159
    Thanked 182 Times in 98 Posts
    Blog Entries
    2

    Standard AW: [CSS] Auto height

    Abgesehen davon, dass du über den Internet Explorer da in deinem Text herziehst muss ich zugeben, dass alles einwandfrei funktioniert im IE 9 (♥) und die DIV sich normal verhält. Vielleicht sagst du uns kurz, welcher Browser genau Probleme macht?

  5. #5
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard AW: [CSS] Auto height

    Zitat Zitat von Raumi Beitrag anzeigen
    Abgesehen davon, dass du über den Internet Explorer da in deinem Text herziehst muss ich zugeben, dass alles einwandfrei funktioniert im IE 9 (♥) und die DIV sich normal verhält. Vielleicht sagst du uns kurz, welcher Browser genau Probleme macht?
    Firefox 4.0.1(bin in der Arbeit und habe keine Rechte die aktuelle Version zu laden xd), habe aber gerade bemerkt
    das es im IE8 genauso funktioniert wie ich will.

    Wahrscheinlich funktioniert es im aktuellen FF dann auch.

    Ein Screen damit Ihr wisst was ich mein(t)e:
    scr7b8e.JPG - IMG-UP.net

    MfG

  6. #6
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    6.080
    Thanked 9.118 Times in 2.995 Posts
    Blog Entries
    5

    Standard AW: [CSS] Auto height

    Zitat Zitat von exception Beitrag anzeigen
    Wahrscheinlich funktioniert es im aktuellen FF dann auch.
    Eher andersrum: Der Internet Explorer interpretiert CSS mal wieder auf seine eigene Art und Weise (nämlich fernab von jeglichen Standards), daher funktioniert das ganze so in keinem anderen Browser außer dem IE.

    Code:
    body {
        height:100%;
        ...
    }
    
    #content {
        min-height:100%;
        ...
    }
    Getestet mit Firefox, Chrome und Opera, müsste jeweils die aktuellste Version gewesen sein.
    IE kp, ich persönlich optimiere auch keine Projekte mehr für den IE.
    Das Ding hängt mit aktuellen Technologien hinterher bzw interpretiert sie eigenmächtig anders, hält sich nicht an festgelegte Standards etc, heißt du kannst deine Projekte erstmal für alle normalen Browser optimieren und dann nochmal extra für den IE.
    Wobei das natürlich noch nicht reicht, beim IE gibts ja gleich mal mehrere Versionen mit unterschiedlichen Macken.
    Die Tatsache, dass je nach Seite immer noch relativ viele User mit uralten Internet Explorer Versionen unterwegs sind macht das ganze natürlich noch lustiger.

    In der aktuellen Version ist das ganze im Vergleich zu Früher ja etwas besser geworden, aber wenn aus einer astronomischen Katastrophe eine normale Katastrophe wird bleibt das ganze eben immer noch eine Katastrophe.
    Zumal die Konkurrenz ja seit Jahren beweist, dass es eindeutig besser geht.


  7. The Following 3 Users Say Thank You to DMW007 For This Useful Post:

    exception (01.10.2012), Minecraft (03.10.2012), Snees (01.10.2012)

  8. #7
    Avatar von Comu
    Registriert seit
    18.11.2011
    Beiträge
    772
    Thanked 753 Times in 363 Posts

    Standard AW: [CSS] Auto height

    Also das von DMW würde funktionieren, jedoch hast du da das Problem das du CSS sagst der body wäre nur 100% groß - was theoretisch richtig ist, wenn man die Box dann aber größer macht als sie wirklich ist, es zwar funktioniert, aber zu ein paar Problemen führen kann.

    Die Lösung die du suchst heißt "overflow". Das ist ein Wert den du zuweisen kannst, wenn du eine höhe dem Parent-DIV zugewiesen hast, jedoch der Content an sich eben schon sichtbar größer wird. Wenn du overflow: auto; mit in dein #content reinpackst passt sich somit der DIV-Container nach der Höhe deinem Text an. Das funktioniert übrigens auch in einem Großteil der IE Versionen.

    Hat also nicht nur den Vorteil das es eigentlich bei so gut wie allen Browsern funktioniert, sondern du auch keine anderen DIV's mit vielen Attributen beschmeißen musst die dir nachher eventuell genau diese Schwierigkeiten wieder bereiten.
    Geändert von Comu (01.10.2012 um 19:00 Uhr)

  9. The Following User Says Thank You to Comu For This Useful Post:

    exception (01.10.2012)

  10. #8

    Registriert seit
    18.12.2011
    Beiträge
    159
    Thanked 182 Times in 98 Posts
    Blog Entries
    2

    Standard AW: [CSS] Auto height

    Ich verweise damit mal auf diese Seiten hier
    New Internet Explorer Browser | Internet Explorer® 9
    HTML5Labs - Home

  11. #9
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard AW: [CSS] Auto height

    Hallo,
    erstmal danke für eure Antworten.

    Die Eigenschaft min-height auf 100% bewirkt zwar das bei mehr Text die Div vergrößert wird, wenn jedoch zB. nur
    ein Satz in der Div steht, verhält sich die Div als wäre sie auf 'height:auto' gestellt und macht deshalbt noch immer
    nicht das was ich will.

    Die Div soll immer 100% über den ganzen Bildschirm gehen(vertikal) und bei "mehr" Text automatisch vergrößert werden.
    Bin schon die ganze Zeit am herumprobieren aber ich bekomm's einfach nicht hin.

    MfG

Ähnliche Themen

  1. Auto Logout
    Von Luckyboy im Forum Support
    Antworten: 4
    Letzter Beitrag: 19.03.2014, 11:16
  2. Was ist das für ein orangenes Auto?
    Von ThunderStorm im Forum Filme, Serien und TV
    Antworten: 2
    Letzter Beitrag: 28.05.2013, 06:21
  3. Auto Lakierung
    Von Glücks Engel im Forum Fahrzeuge
    Antworten: 9
    Letzter Beitrag: 04.08.2012, 19:55
  4. auto kauf
    Von helfen im Forum RealLife
    Antworten: 4
    Letzter Beitrag: 17.03.2012, 15:30
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.