• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Höhe von einem DIV automatisch anpassen

R

rt1234

Neues Mitglied
Hallo,

ich habe ein Problem, ich weiß nicht wie ich es anstelle, dass sind die Höhe von einem Div automatisch an der Höhe eines nebenstehenden Divs anpasst. Also wenn sich die Höhe von Div 1 zum Beispiel durch zusätzlichen Text vergrößert, dass sich die Höhe von Div 2 unabhängig des Inhlates von Div 2 auch erhöht. Die beiden Divs haben beide float:left und sind natürlich in einem Surrounding Div. Mit height:100% tut sich leider gar nichts:

3524414div.jpg
 
Wenn du ältere Browser nicht unterstützen musst würde ich dir raten dies mit Flexboxen zu realisieren. Wenn es allerdings nur darum geht beide Divs scheinbar(Hintergrund) gleich groß zu präsentieren, könntest du auch auf die Pseudoklassen :after/:before zugreifen.

Zu Flexbox ein kleines Beispiel:



Code: 
* {

margin: 0;
padding: 0;


}

.wrapper {

width: 100%;
height: 300px;

display: -webkit-flex;
display: -ms-flex;
display: flex;



}

#box1 {

    webkit-flex: 1;    
    -ms-flex: 1;
    flex: 1;
    background-color: red;

}

#box2 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

    background-color: green;

}

HTML: 
<div class="wrapper">
        <div id="box1">g</div>
        <div id="box2">g</div>
    </div>
 
Zuletzt bearbeitet:
Danke. Grundsätzlich funktioniert das mit der Flexbox. Nur hab ich ein Problem. Der Aufbau schaut so aus:

4941556div.jpg


Habe dem Surrounding DIV folgendes geben:
  1. display: -webkit-flex;
  2. display: -ms-flex;
  3. display: flex;
Und DIV 1 und 2:
  1. -webkit-flex: 1;
  2. -ms-flex: 1;
  3. flex: 1;
Wenn ich nun im Text DIV von DIV 1 mehr Text eingebe, dann passt sich in der Tat die Höhe von DIV 2 an. Was ich aber will, ist dass sich das Text DIV von DIV 2 anpasst. Ist das mit Flexbox überhaupt möglich?

Danke!
 
Sowas?

HTML: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
    <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="!Test.css" />
   
   

</head>

<body>   


<div id="images" class="flexbox">
        <!---Bilder links -->
        <div class="box1">
            <img height="200" width="200">
        </div>
       
        <!---Bilder rechts-->
        <div class="box2">
            <img height="200" width="200">
        </div>
       
</div>


   
   
<div id="content" class="flexbox">
            <!---Text links -->
            <div class="box1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

      <!---Text rechts-->
      <div class="box2">g</div>
   
</div>





   
</body>

</html>

Code: 
* {
margin: 0;
padding: 0;
}
.flexbox {
width: 100%;

display: -webkit-flex;
display: -ms-flex;
display: flex;
}

#images img {

     webkit-flex: 1;   
    -ms-flex: 1;
    flex: 1;
   

}
.box1 {
    webkit-flex: 1;   
    -ms-flex: 1;
    flex: 1;
    background-color: red;
}
.box2 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: green;
}

#content {

    margin-top: 2em;

}

mfg
 
Zuletzt bearbeitet:
Habs versucht, bin aber leider gescheitert.

Das Ding ist in Contao, darum sind die Vorgaben etwas fixer.

Der große und die beiden kleinen Teaser sollen sich jeweils an den längsten Textinhalt anpassen:

http://goo.gl/uA2wmO
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben