Spalten mit Inhalt ausrichten halten letzte div nach unten ausgerichtet?

Question

Ich habe 3 Spalten mit Inhalt und ich habe es geschafft, das letzte div nach unten auszurichten, indem ich der Spalte eine feste Höhe gebe. Gibt es eine bessere Methode, da dies nicht funktioniert, wenn jemand den Inhalt ändert, mehr Text oder weniger Text hinzufügt.

.column { 
    width: 33%; 
    float: left; 
    background: #ccc; 
    height: 350px; 
    position: relative; 
} 
.btn { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    text-align: center; 
    padding: 10px; 
} 

Mein Fiddle: Fiddle

Answer 1

Flexbox Layout ist eine gute Lösung.

Das body Element hat Zeilenlayout (es enthält die 3 Spalten), jede Spalte hat Spaltenlayout (offensichtlich). und innerhalb der Spalte wächst der Inhalt, um den verbleibenden Raum zu füllen.

Ich entfernte die absolute Positionierung von der .btn Klasse, so würde es den Platz innerhalb der Coulmn nehmen.

body { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.column { 
 
    width: 33%; 
 
    float: left; 
 
    background: #ccc; 
 
    min-height: 350px; 
 
    position: relative; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    flex-grow: 1; 
 
    padding: 0 5px; 
 
} 
 

 
.btn { 
 
    text-align: center; 
 
    padding: 10px; 
 
}

<div class="column"> 
 
    <div class="title"> 
 
    <h2>Title 1</h2> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
    </div> 
 
    <div class="btn">Click Me!</div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="title"> 
 
    <h2>Title 2</h2> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? Lorem ipsum 
 
    dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
    </div> 
 
    <div class="btn">Click Me!</div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="title"> 
 
    <h2>Title 3</h2> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
    </div> 
 
    <div class="btn">Click Me!</div> 
 
</div>

Answer 2

Wenn Sie Spalten mit fester Höhe benötigen.

Hier ist der Code

.column { 
 
    width: 33%; 
 
    float: left; 
 
    background: #ccc; 
 
    height: 350px; 
 
    position: relative; 
 
} 
 
.btn { 
 
    text-align: center; 
 
    padding: 10px; 
 
    
 
} 
 
.content{background:#f5f5f5;height:240px;overflow-x:hidden;overflow-y:auto;}

<div class="column"> 
 
     <div class="title"> 
 
     <h2>Title 1</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div> 
 
    
 
    <div class="column"> 
 
     <div class="title"> 
 
      <h2>Title 2</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div> 
 
    
 
    <div class="column"> 
 
     <div class="title"> 
 
      <h2>Title 3</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div>

Andernfalls, wenn Sie div immer unten nach oben Elemente dauern soll nicht als festgelegt. Hier

ist die Code->

.column { 
 
    width: 33%; 
 
    float: left; 
 
    background: #ccc; 
 
    height: auto; 
 
    position: relative; 
 
} 
 
.btn { 
 
    text-align: center; 
 
    padding: 10px; 
 
    
 
} 
 
.content{background:#f5f5f5;}

<div class="column"> 
 
     <div class="title"> 
 
     <h2>Title 1</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div> 
 
    
 
    <div class="column"> 
 
     <div class="title"> 
 
      <h2>Title 2</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div> 
 
    
 
    <div class="column"> 
 
     <div class="title"> 
 
      <h2>Title 3</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div>