Внутренний Div 100% высота за пределами родительского Div

Question

Причина, по которой это происходит, очевидно, из-за серой рамки выше. Теперь я попытался использовать 97%, но это не так хорошо работает, когда вы меняете размер. Я не могу использовать статическое значение, так как внешний div может измениться.

Есть ли способ решить эту проблему? Без JavaScript и если это невозможно с помощью css, то какова высота: expresion (???); за это?

Кстати, код, который у меня пока есть:

.outside_div {  
    width:227px;
    height:500px;
 }

.scrolabe_div {
    width:100%;
    height:100%;
    overflow:auto;
}

Заранее спасибо.

Answer 1

Вместо этого вы можете использовать атрибут bottom.

.outside_div {
    position: absolute;
    width: 227px;
    height: 500px;
}

.scrolabe_div {
    position: absolute;
    width: 100%;
    top: 50px; /* since the top doesn't change, fix it here */
    bottom: 10px; /* set this accordingly, probably 10px */
    overflow: auto;
}

Answer 2

Удалить высоту из прокручиваемого элемента div:

.scrolabe_div {
    width:100%;
    overflow:auto;
}

При указании в процентах height или width вычисленное значение относится к родительскому контейнеру.Если вы удалите определение высоты на .scrollable_div, тогда оно будет увеличено на height по отношению к его содержимому.

Answer 3

Просто удалите height из вашего CSS или стиля. браузер отображает высоту внутреннего элемента и определяет длину внешнего элемента, поэтому указывать высоту не нужно