Question

我正在尝试创建一个侧边栏，其中底部显示年份，顶部显示链接列表。

年文字应保留在底部，其高度应为auto而非绝对值（如30px，1em，10％等）
顶部链接应保留在剩余高度（屏幕高度 - 年文字的高度）内。
当链接高度超过时，应提供滚动。

我已经成功实现了前2个，但不是第3个。当链接高度超过时，年会隐藏在屏幕上。

我使用table来实现我指定的目标。（我本可以使用display: table;只是在这里懒惰）

我想只使用CSS，没有JavaScript来实现这一点。

＆＃13;

/* 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;
}

/* Positioning */
.side-bar {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
}
.side-bar table {
	height: 100%;
	table-layout: fixed;
}
.side-bar table tr:last-child td {
	height: 1px;
}
.side-bar table td {
	vertical-align: baseline;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="side-bar">
<table>
	<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>
							</ul>
		</td>
	</tr>
	<tr>
		<td class="year">
			<b>2016</b>
		</td>
	</tr>
</table>
</div>

＆＃13;

Answer 1

尝试使用以下CSS并查看它是否有效：

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

Answer 2

您必须拥有能够确定容器最大高度的东西。然后你可以处理溢出。我已经修改了一些代码以更改为div布局并在容器上设置溢出。我相信这就是你所追求的。

代码段中的示例有一个固定的高度，因此您可能需要全屏打开以查看整个示例（“运行代码段” - 然后是“整页”）。 < / p>

您还可以使用百分比来避免使用固定高度。

/* 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>

在另一个div高度低于它之后，让div取剩余高度

3 个答案: