kostenloser Webspace werbefrei: lima-city


CSS - Höhe korrekt einstellen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    j*********r

    Hallo!

    Heute habe ich ein ziemlich blödes Problem. Blöd ist es deshalb, weil es aussieht, als könnte man es einfach lösen, das ist es aber nicht. Mein HTML-Code sieht ungefähr so aus:

    <div id="container">
      <div id="balken"></div>
      <div id="text">Lorem ipsum...</div>
      <div id="buttonContainer">
           <button>A</button>
           <button>B</button>
      </div>
    </div>


    In #text befindet sich noch ein bisschen mehr Text, die Länge davon kann sich aber ändern! Mein Ziel ist nun folgendes: #text soll so groß sein, wie der Text halt Platz braucht. Danach soll sich auch die Höhe von #container ausrichten. #buttonContainer und #balken sollen dann so angepasst werden, dass sie genau so hoch sind, wie #text. Im Wesentlichen sollte das ganze dann so aussehen:
    http://abload.de/img/bild1muu8y.png

    Das Problem ist: Einfach die Eigenschaft height auf 100% zu setzen funktioniert nicht. Und auch mit JavaScript hat es nicht geklappt (height manuell auf die Höhe von #text setzen) - warum auch immer.

    Gibt es doch noch eine Lösung mit CSS?

    mfg
    Jonas

    Beitrag zuletzt geändert: 5.8.2015 11:51:10 von jonas-bayer
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    Schon
    height: auto !important;
    versucht?

    Beitrag zuletzt geändert: 5.8.2015 15:57:02 von marvinkleinmusic
  4. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Diese Frage (wenn ich sie richtig verstehe) wird schon seit ewigen Zeiten diskutiert. Vor langer Zeit schlug man dafür vor, alles in eine Tabelle zu packen. Andere Webdesigner schlugen Lösungen mit JavaScript vor. Es gibt aber eine Lösung: tabellenartig, aber ohne Tabellen. Mit deinem HTML-Code sollte sie etwa so aussehen:
    <style>
    #container{
      display: table;   
    }
    #balken, #text, #buttonContainer{
      display: table-cell;
    } 
    </style>
    <div id="container">
      <div id="balken"></div>
      <div id="text">Lorem ipsum...</div>
      <div id="buttonContainer">
           <button>A</button>
           <button>B</button>
      </div>
    </div>

    In diesem Beispiel sollten sich die drei Divs so verhalten, wie Zellen einer Tabelle, d.h alle drei gleich hoch und mindestens so hoch wie die höchste. Hier mal als schnelles Beispiel:
    http://codepen.io/bpgs/pen/RPvVYd
    oder in der Vollbildansicht
    http://codepen.io/bpgs/full/RPvVYd


    Beitrag zuletzt geändert: 5.8.2015 16:33:49 von mein-wunschname
  5. Autor dieses Themas

    j*********r

    height: auto !important;

    funktioniert nicht.
    @mein-wunschname: Danke für die Lösung, ich werde es mal versuchen. :wink:

    EDIT: Es hat funktioniert, vielen Dank!

    mfg
    Jonas

    Beitrag zuletzt geändert: 5.8.2015 19:26:09 von jonas-bayer
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!