1. #1
    Nachrichtendienst
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    199
    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
    U-Labs Legende
    Avatar von Snees
    Registriert seit
    18.11.2011
    Beiträge
    1.000
    Thanked 590 Times in 319 Posts

    Standard AW: [CSS] Auto height

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

    unbenannt.jpg

  3. #3
    Nachrichtendienst
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    199
    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
    Permanent gesperrt

    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
    Nachrichtendienst
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    199
    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
    Projektleitung
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    4.099
    Thanked 8.521 Times in 2.549 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
    Permanent gesperrt

    Registriert seit
    18.11.2011
    Beiträge
    773
    Thanked 752 Times in 362 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
    Permanent gesperrt

    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
    Nachrichtendienst
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    199
    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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191