He estado consultando y la única opción que dan es de darle al parent position: relative
y al child position: absolute; bottom: 0px;
Lo que me pasa es que el div que quiero posicionar se sitúa encima de los <p>
que tengo anteriormente. Y no quiero ponerle un height
específico porque si no en el media queries
tengo que hacer muchos valores de píxeles.
.parentcolumnecom {
overflow: hidden;
margin: 50px 50px 20px 50px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.columnecom, .columnecom1, .columnecom2 {
width: 33.33%;
flex: 1;
padding: 30px;
border-radius: 20px;
background-color: #929FB1;
position: relative;
}
.columnecom {
float: left;
margin-right: 10px;
}
.columnecom1 {
margin-right: 10px;
margin-left: 10px;
}
.columnecom2 {
float: right;
margin-left: 10px;
}
.title-sect{
text-transform: uppercase;
background-color: white;
border-radius: 10px;
}
.benefits{
margin-top: auto;
margin-bottom: auto;
padding: 10px;
border: #225E8A 2px solid;
background-color: white;
border-radius: 20px;
position: absolute;
bottom: 0px;
}
<div class="parentcolumnecom">
<div class="columnecom">
<hr>
<h2 class="text-center title-sect">Comerç no segur</h2>
<hr>
<div class="text-size18">
<p>És el mode més bàsic de treballar amb el Comerç Electrònic.</p>
<p>No proporciona ningun tipus de seguretat al comerç, ja que l'únic requerit són les dades bàsiques de la targeta dins el procés de compra (PAN + Caducitat + CVV)</p>
</div>
<div class="benefits text-center">
<p><strong>Principal avantatge:</strong></p>
<p class="text-left">Per a l'usuari, el procès de compra, és més ràpid i senzill.</p>
<p><strong>Principal inconvenient:</strong></p>
<p class="text-left">en tractar-se d'un comerç no segur, el banc trasllada el risc d'estafa al comerç; si un client reclama una transacció ("chargeback"), el banc sempre li donarà la raó al client fent així que el comerç no cobri l'import de la transacció. (No hi ha manera d'evitar transaccions amb una targeta robada)</p>
</div>
</div>
<div class="columnecom1">
<hr>
<h2 class="text-center title-sect">Comerç segur</h2>
<hr>
<div class="text-size18">
<p>Aquest mètode és l'equivalent a la utilització del PIN en el comerç presencial.</p>
<p>Per poder completar les transaccions en aquest mètode es necessita el PIN o la contrasenya que només el titular coneix, de tal manera que no s'acceptarà un "chargeback" amb l'argument "jo no he fet aquesta compra" Es coneix com a "3D-Secure". A l'hora de processar el pagament, es redirigeix l'ordre al banc del titular, qui pot actuar segons el procés determinat pel seu banc. El titular introdueix el codi, el banc el valida i el procés de compra finalitza.</p>
</div>
<div class="benefits text-center">
<p><strong>Principal avantatge:</strong></p>
<p class="text-left">Les operacions tenen un alt grau de seguretat, ja que el titular ha "firmat" les transaccions. És molt més difícil que s'ocasionin "chargebacks", ja que el risc es trasllada al banc.</p>
<p><strong>Principal desavantatge:</strong></p>
<p class="text-left">El procés de compra és més laboriós per al titular.</p>
</div>
</div>
<div class="columnecom2">
<hr>
<h2 class="text-center title-sect">Funcionament dinàmic (No segur + segur)</h2>
<hr>
<div class="text-size18">
<p>És un híbrid de les dues modalitats citades anteriorment.</p>
<p>És utilitzat comunament de la següent manera:</p>
<p>La primera compra d'un nou client sol·licita el comerç segur, a partir d'aquí, en les següents compres, s'utilitza el comerç no segur.</p>
<p>Es poden utilitzar diferents regles perquè, per exemple, una compra successiva que impliqui un import més alt de l'establert accioni el comerç segur encara que el client ja s'hagi identificat.</p>
</div>
<div class="benefits text-center">
<p><strong>Principal avantatge:</strong></p>
<p class="text-left">les operacions tenen un alt grau de seguretat, ja que el titular ha "firmat" les transaccions.</p>
<p><strong>Principal inconvenient:</strong></p>
<p class="text-left"> La primera compra, o les compres sota un determinat criteri, són una mica més laborioses pel titular.</p>
</div>
</div>
</div>
Entonces, lo que me gustaría es que los 3 divs tuvieran el mismo tamaño y además, que ese cuadro class="benefits"
se colocara al final del <div> parent
independientemente del height
que tenga el mismo.