Twórz dwa divy obok siebie, jeden jest skalowalny, a drugi ma taką samą wysokość.

Question

Przynoszę tutaj dramat o wysokości css.

Chciałbym zrobić układ, div, który zawiera 2 divs w tej samej linii, jeden jest skalowalny, a drugi musi zmieścić się w wysokości rodziców (ta sama wysokość co pierwsza).

Pierwszy element div może zawierać dodatkowe informacje (więc nie może ustalić wysokości), więc będzie miał więcej linii, ważne jest to, że nie może mieć paska przewijania. Drugi element div musi być zgodny z pierwszą wysokością, jeśli jest większy niż pasek przewijania.

<div class='container'> <!-- parent --> 
    <div class='left'> <!-- resizable --> 
    </div> 
    <div class='right'> <!-- same height as left div --> 
    </div> 
</div> 

UNSOLVED CODE

Problemem jest to, że nie mogę dowiedzieć się, jak to zrobić tylko za pomocą CSS. Lub nawet jest to możliwe tylko z css. Nie chciałbym używać js.

Ktoś proszę mi pomóc!

Answer 1

Fiddle

Co zrobić, to prawo jeden absolutely positioned który zatrzymuje jego wysokość wpływające na rodziców.

ISTOTNE CSS

.container { 
    background-color: gray; 
    display: table; 
    width: 70%; 
    position:relative; 
} 

.container .left{ 
    background-color: tomato; 
    width: 35%; 
} 

.container .right{ 
    position:absolute; 
    top:0px; 
    left:35%; 
    background-color: orange; 
    width: 65%; 
    height:100%; 
    overflow-y: auto; 
}