Layout a 2 colonne con 1 contenitore di proporzioni e div a altezza intera - html, css

Sto cercando di creare un layout a due colonne, con una colonna di 2/3 di larghezza e la seconda di 1/3.

La prima colonna dovrebbe essere occupata da un contenitore video che mantiene un rapporto aspetto di 4: 3. Penso di averlo fatto correttamente impostando il padding del contenitore video al 75%.

Mi piacerebbe che la 3a colonna contenga un div che si espande fino alla piena altezza della riga. Non sembra in grado di farlo.

Volevo solo chiedere se questo fosse dovuto al fatto che ilil layout della colonna guadagna la sua altezza dal contenitore del video (che a sua volta si basa sulla sua larghezza)? O ho semplicemente trascurato qualcosa di semplice? Mi piacerebbe smettere di aggiungere "altezza: 100%" a caso nella vaga speranza che funziona e in realtà capisco cosa mi manca!

<div class="container">
<div class="row">
<div class="col-2-of-3">
<div class="video-container">
<div class="video">Column Containing 4:3 Video</div>
</div>
</div>
<div class="col-1-of-3">
<div class="full-height-div">
Div in column 2
</div>
</div>
</div>
</div>

css

.container {
border: 1px dotted red;
}

.row {
background: #aeaeae;
width: 100%;
height: 100%;
}
.row::after {
content: "";
display: table;
clear: both;
}

[class^="col-"] {
height: 100%;
float: left;
}
[class^="col-"]:not(:last-child) {
margin-right: 10px;
}

.col-1-of-3 {
width: calc((100% - 2 * 10px}) / 3);
}

.col-2-of-3 {
width: calc(((100% - 2 * 10px) / 3) * 2 + 10px);
}

.video-container {
height: 0;
overflow: hidden;
padding-top: 75%;
position: relative;
width: 100%;
}

.video {
background: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
}

.full-height-div {
max-width: 100%;
height: 100%;
border: 1px dotted #fff;
}

codepen: https://codepen.io/anon/pen/jxzMag?editors=1100

risposte:

Puoi usare flexbox invece di float per creare il layout: Una guida completa per Flexbox

Per impostazione predefinita, gli elementi in un layout di riga flessibile vengono allungati al 100% dell'altezza della riga

Esempio: https://codepen.io/anon/pen/gzzvyO

.container{
border: 1px dotted red;
}

.row{
background: #aeaeae;
display: flex;
}

.col-2-of-3{
width: 67%;
flex-grow: 0;
}

.col-1-of-3{
flex-grow: 1;
margin-left: 10px;
}

.video-container {
height: 0;
overflow: hidden;
padding-top: 75%;
position: relative;
width: 100%;
}

.video{
background: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
}

.full-height-div{
height: 100%;
border: 1px dotted #fff;
}