Сделать div взять оставшуюся высоту после того, как другой div поднимется ниже его.

Question

Я пытаюсь создать боковую панель, где в нижней части отображается список и список ссылок сверху.

1. год текст должен находиться в нижней части, а его высота должна быть auto не абсолютные значения (например, 30px, 1em, 10% и т.д.)
2. Верхние ссылки должны оставаться внутри оставшейся высоты (экран высота - высота год текст).
3. Когда высота ссылок превышает, должна быть предусмотрена прокрутка.

Я успешно достиг первых 2, но не 3-го. Когда высота ссылок превышает, год скрывается от экрана.

Я использовал table для достижения того, что я указал. (Я мог бы использовать display: table, просто лень здесь)

Я хочу, чтобы достичь этого, используя только CSS, без JavaScript.

/* Some styles */ 
 
.side-bar table { 
 
\t color: #fff; 
 
} 
 
.side-bar-links { 
 
\t background-color: #48c; 
 
\t padding-top: 15px; 
 
} 
 
.side-bar-links li:nth-child(even) { 
 
\t background-color: rgba(0,0,0,0.1); 
 
} 
 
.side-bar-links a { 
 
\t display: block; 
 
\t color: #fff; 
 
\t padding: 5px 15px; 
 
\t text-decoration: none; 
 
} 
 
.side-bar-links a:hover { 
 
\t background-color: rgba(0,0,0,0.2); 
 
} 
 
.year { 
 
\t background-color: #338; 
 
\t font-size: 36px; 
 
\t font-weight: 700; 
 
\t padding: 5px 15px; 
 
} 
 

 
/* Positioning */ 
 
.side-bar { 
 
\t position: fixed; 
 
\t left: 0; 
 
\t top: 0; 
 
\t bottom: 0; 
 
} 
 
.side-bar table { 
 
\t height: 100%; 
 
\t table-layout: fixed; 
 
} 
 
.side-bar table tr:last-child td { 
 
\t height: 1px; 
 
} 
 
.side-bar table td { 
 
\t vertical-align: baseline; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="side-bar"> 
 
<table> 
 
\t <tr> 
 
\t \t <td class="side-bar-links"> 
 
\t \t \t <ul class="list-unstyled"> 
 
\t \t \t \t \t \t \t \t <li><a href="#">&gt; Link 1</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#">&gt; Link 2</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#">&gt; Link 3</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#">&gt; Link 4</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#">&gt; Link 5</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td class="year"> 
 
\t \t \t <b>2016</b> 
 
\t \t </td> 
 
\t </tr> 
 
</table> 
 
</div>

Answer 1

Попробуйте следующий CSS и посмотреть, если он работает:

.side-bar { 
position: fixed; 
left: 0; 
top: 0; 
bottom: 0; 
overflow: scroll; 
overflow-y: auto; 
overflow-x: auto; 
} 

Answer 2

Вы должны иметь что-то, что определяет максимальную высоту ваш контейнер будет. Затем вы можете обрабатывать переполнение. Я немного изменил свой код, чтобы перейти на макет div и настроить переполнение контейнера. Я верю, что это то, что тебе нужно.

Пример в отрывке имеет фиксированную высоту, поэтому вам может потребоваться открыть его в полноэкранном режиме, чтобы увидеть весь пример («Выполнить фрагмент кода» - затем «полная страница»).

Вы также можете использовать проценты для высоты, чтобы избежать использования фиксированной высоты.

/* Some styles */ 
 

 
.side-bar-links { 
 
    height: 300px; 
 
    max-height: 400px; 
 
    overflow:hidden; 
 
    background-color: #48c; 
 
    padding-top: 15px; 
 
    overflow-y: auto; 
 
} 
 
.side-bar-links li:nth-child(even) { 
 
    background-color: rgba(0,0,0,0.1); 
 
} 
 
.side-bar-links a { 
 
    display: block; 
 
    color: #fff; 
 
    padding: 5px 15px; 
 
    text-decoration: none; 
 
} 
 
.side-bar-links a:hover { 
 
    background-color: rgba(0,0,0,0.2); 
 
} 
 
.year { 
 
    background-color: #338; 
 
    font-size: 36px; 
 
    font-weight: 700; 
 
    padding: 5px 15px; 
 
    color: #fff; 
 
} 
 

 
/* Positioning */ 
 
.side-bar { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="side-bar"> 
 
    <div class="side-bar-links"> 
 
    <ul class="list-unstyled"> 
 
     <li><a href="#">&gt; Link 1</a></li> 
 
     <li><a href="#">&gt; Link 2</a></li> 
 
     <li><a href="#">&gt; Link 3</a></li> 
 
     <li><a href="#">&gt; Link 4</a></li> 
 
     <li><a href="#">&gt; Link 5</a></li> 
 
     <li><a href="#">&gt; Link 1</a></li> 
 
     <li><a href="#">&gt; Link 2</a></li> 
 
     <li><a href="#">&gt; Link 3</a></li> 
 
     <li><a href="#">&gt; Link 4</a></li> 
 
     <li><a href="#">&gt; Link 5</a></li> 
 
     <li><a href="#">&gt; Link 1</a></li> 
 
     <li><a href="#">&gt; Link 2</a></li> 
 
     <li><a href="#">&gt; Link 3</a></li> 
 
     <li><a href="#">&gt; Link 4</a></li> 
 
     <li><a href="#">&gt; Link 5</a></li> 
 
     <li><a href="#">&gt; Link 1</a></li> 
 
     <li><a href="#">&gt; Link 2</a></li> 
 
     <li><a href="#">&gt; Link 3</a></li> 
 
     <li><a href="#">&gt; Link 4</a></li> 
 
     <li><a href="#">&gt; Link 5</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="year"> 
 
    <b>2016</b> 
 
    </div> 
 
</div>

Answer 3

Попробуйте следующее:

<html><head> 
<title>Page Title</title> 
<style> 
/* Some styles */ 
.side-bar table { 
    color: #fff; 
} 
.side-bar-links { 
    background-color: #48c; 
    padding-top: 15px; 
} 
.side-bar-links li:nth-child(even) { 
    background-color: rgba(0,0,0,0.1); 
} 
.side-bar-links a { 
    display: block; 
    color: #fff; 
    padding: 5px 15px; 
    text-decoration: none; 
} 
.side-bar-links a:hover { 
    background-color: rgba(0,0,0,0.2); 
} 
.year { 
    background-color: #338; 
    font-size: 36px; 
    font-weight: 700; 
    padding: 5px 15px; 
    position: fixed; 
    bottom: 0px; 
    height: auto !Important; 
    width: auto; 
} 

/* Positioning */ 
.side-bar { 
    position: fixed; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    overflow: scroll; 
    overflow-y: auto; 
    overflow-x: auto; 
    height: calc(100% - 60px); 
} 
.side-bar tr:first-child{height:100%;} 
.side-bar table { 
    height: 100%; 
    table-layout: fixed; 
    width:110px; 
} 
.side-bar table tr:last-child td { 
    height: 1px; 
} 
.side-bar table td { 
    vertical-align: baseline; 
} 
</style> 
</head> 
<body> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 

<div class="side-bar"> 
<table> 
<tbody><tr> 
    <td class="side-bar-links"> 
    <ul class="list-unstyled"> 
     <li><a href="#">&gt; Link 1</a></li> 
     <li><a href="#">&gt; Link 2</a></li> 
     <li><a href="#">&gt; Link 3</a></li> 
     <li><a href="#">&gt; Link 4</a></li> 
     <li><a href="#">&gt; Link 5</a></li> 
     <li><a href="#">&gt; Link 5</a></li> 
     <li><a href="#">&gt; Link 5</a></li> 
     </ul> 
    </td> 
</tr> 
<tr> 
    <td class="year"> 
    <b>2016</b> 
    </td> 
</tr> 
</tbody></table> 
</div> 




</body></html>