kostenloser Webspace werbefrei: lima-city

CSS - Höhe korrekt einstellen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   j*********r

   11:50, 5.8.2015

   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

   

   marvinkleinmusic hat kostenlosen Webspace.

   15:55, 5.8.2015

   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.

   16:33, 5.8.2015

   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

   17:33, 5.8.2015

   height: auto !important;

   
   funktioniert nicht.
   @mein-wunschname: Danke für die Lösung, ich werde es mal versuchen.
   
   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?