让div取其余的高度后，另一个div的高度低于它

Question

我想创建一个侧栏，年份显示在底部和顶部的链接列表。

1. 的年文本应该留在底部，其高度应不auto绝对值（如30像素，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>