Dywan dziecięcy o wysokości 100% do nadrzędnej automatycznej wysokości

Question

Jestem tutaj, ponieważ inne podobne pytania nie mogą pomóc w rozwiązaniu mojego konkretnego problemu.

Potrzebuję, aby right div stale wynosił 100% wysokości, gdzie wysokość parent zależy od wysokości left div, która zależy od zawartości w środku.

Oto html:

<div class="container clearfix"> 
<div class="left"></div> 
<div class="right"></div> 
</div> 

Oto CSS:

.container{ 
    min-height: 10px; 
    width: auto; 
    height: auto; 
    background-color: #eeeeee; 
} 

.left{ 
    position: relative; 
    float: left; 
    min-height: 100px; 
    width: 50px; 
    background-color: #dddddd; 
} 

.right{ 
    min-height: 20px; 
    position: relative; 
    float: left; 
    height: 100%; 
    width: 50px; 
    background-color: #dddddd; 
} 

. 

.clearfix:after 
{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
.clearfix { 
    display: inline-block; 
} 

Uwaga:
Używam clearfix.
A jeśli można pokazać swoją odpowiedź w jsfiddle

Oto jsFiddle http://jsfiddle.net/C9Kmx/32/

Answer 1

Czytając komentarze na temat innych rozwiązań jest to dla mnie jasne, że jedynym rozwiązaniem dla ciebie jest, aby wdrożyć pewne JS w kodzie. Nie stanowi to jednak problemu.

http://jsfiddle.net/b7TuP/

Answer 2

Daj position:fixed i height:100% dla prawego div. To rozwiąże twój problem.

Answer 3

Złóż odpowiedni div position:absolute; i wykonaj podziałkę rodzicielską position:relative;, a następnie height:100%; będzie działać dla prawego div. Upewnij się, że odpowiednio dopasowujesz także jego położenie i szerokość. W tym przykładzie dałem mu left:50px, aby upewnić się, że pojawia się po prawej stronie lewej kolumny.

JSFiddlehttp://jsfiddle.net/e9mvD/

Answer 4

Można użyć wartości table-cell nieruchomości display w tym układzie i usunąć float takiego:

.left, .right{ 
    display:table-cell; 
} 

demo żywo http://jsfiddle.net/C9Kmx/34/

Answer 5

Spróbuj dając wysokość pojemnika o stałej wartości

to również rozwiąże problem. Po prostu próbowałem go w jsFiddle

http://jsfiddle.net/C9Kmx/35/

.container 
{ 
    min-height: 10px; 
    width: auto; 
    height: 100px; 
    background-color: #eeeeee; 
} 

Answer 6

Można tego dokonać za pomocą schematu flexbox i trochę kreatywności.

.container { 
 
    display: flex; 
 
    background: black; 
 
    padding: 5px; 
 
    width: 300px 
 
} 
 

 
.left { 
 
    height: 200px; 
 
    flex: 1 0 0px; 
 
    background: blue; 
 
} 
 

 
.right { 
 
    flex: 1 0 0px; 
 
    overflow: auto; 
 
    background: green; 
 
} 
 

 
.column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 20%; 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="column"> 
 
    <div class="right"></div> 
 
    </div> 
 
</div>