我想要一个显示在顶部的标题,其中内容始终显示在其下方。我见过的解决方案使用position:fixed表示如果内容(长表)滚动,它会显示在标题下方。
我希望内容没有固定的高度,因为我想在不同的设备上使用。
答案 0 :(得分:0)
基本上我不推荐使用固定定位,因为它在某些旧设备和平台上不稳定,固定值是最后支持的位置值,所以我建议你使用绝对定位,你可以将您的html页面分成两个div,一个用于标题,一个用于内容,并将两个div设置为绝对定位,但如果内容设置溢出为auto。
这是一个示例代码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position:absolute;height:20%;width:100%;background-color:red">
Fixed header with height 20%
</div>
<div style="position:absolute;top:20%;height:80%;width:100%;background-color:green;overflow:auto">
Your scrollable content here
</div>
</div>
</body>
</html>
您可以按百分比或绝对值调整标题
答案 1 :(得分:0)
我认为这就是你要找的东西。基本上你需要限制<body>
高度,并使用<div>
将<table>
围绕你的position: absolute
包围,并使用overflow: auto
拉伸到屏幕高度,并且应该滚动远离身体拥有自己的position: fixed
。如果您创建此视口,则标题上甚至不需要body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
header {
padding: 0 10px;
position: absolute;
top: 0;
width: 100%;
height: 44px;
line-height: 44px;
border-bottom: 1px solid;
}
.viewport {
padding: 0 10px;
position: absolute;
width: 100%;
top: 44px;
bottom: 0;
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
margin: 0;
text-align: left;
height: 44px;
vertical-align: middle;
border-bottom: 1px solid black;
}
tr:last-child td {
border-bottom: 0;
}
。
<header>Header Title</header>
<div class="viewport">
<table>
<thead>
<tr>
<th colspan="2">Content Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
<tr>
<td>Some key:</td>
<td>some value</td>
</tr>
</tbody>
</table>
</div>
{{1}}