т. Е. Прокручиваемая абсолютная таблица-ячейка

Question

Я пытаюсь создать прокручиваемое боковое меню. Я сделал это с помощью table-cell. Вот моя скрипка: https://jsfiddle.net/y6aq3oub/3/ Код:

#container { 
 
    display:table; 
 
} 
 
#footer { 
 
    width:100%; 
 
    height:20px; 
 
    background-color:white; 
 
    border: 1px solid black; 
 
} 
 

 
.absolute-menu { 
 
    position: absolute; 
 
    overflow-y: auto; 
 
    width: 100%; 
 
    height: 100% 
 
} 
 
.column { 
 
    display:table-cell; 
 
    position: relative; 
 
    vertical-align:top; 
 
} 
 
#col1 { 
 
    width:25%; 
 
    background-color:red; 
 
} 
 
#col2 { 
 
    background-color:blue; 
 
}

<div id="container"> 
 
    <div id="col1" class="column"> 
 
    <div class="absolute-menu"> 
 
     <div>1</div> 
 
     <div>2</div> 
 
     <div>3</div> 
 
     <div>4</div> 
 
     <div>5</div> 
 
     <div>6</div> 
 
     <div>7</div> 
 
    </div> 
 
    </div> 
 
    <div id="col2" class="course-column"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula  eget dolor. Aenean massa. 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula  eget dolor. Aenean massa. 
 
    </div> 
 
</div> 
 
<div id="footer"></div>

Но высота меню равна нулю в IE8-IE11. Я нашел несколько подобных вопросов, но их решения не помогли мне

Например: IE display: table-cell child ignores height: 100% Требования:

• col1 высота = col2 высота
• col2 высота динамический
• col1 содержание перелива должно быть прокручиваемый

Answer 1

Я нашел решение https://jsfiddle.net/y6aq3oub/7/ Необходимо использовать поля

.container { 
    position: relative; 
    display: inline-block; 
    background: red; /* This will serve as a background for a menu. */ 
} 

.absolute-menu { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    overflow-y: auto; 
    width: 25%; /* You'll have to sync this... */ 
} 

.course-column { 
    margin-left: 25%; /* ... and this. */ 
    background-color: blue; 
} 

#footer { 
    width:100%; 
    height:20px; 
    background-color:white; 
    border: 1px solid black; 
}