图示如下,其中Title Bar, Side Bar及Nav Bar不随滚动条滚动而上下移动:
详细代码与CSS如下,注释已很详尽:
<html>
<head title='test'>
</head>
<body>
<div class='container'>
<div class='title-bar'>
<h2>Title Bar</h2>
</div>
<div class='side-bar'>
<h2>Side Bar</h2>
</div>
<div class='nav-bar'>
<h2>Nav Bar</h2>
</div>
<div class='content'>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>
</div>
</body>
<style>
html, body {
height: 100%; /* 子元素高度可同屏 */
margin: 0; /* 去除缺省margin */
}
.container {
position: relative; /* 子元素使用absolute相对本元素 */
height: 100%; /* 高度同屏 */
width: 100%; /* 宽度同屏 */
}
h2 {
color: white;
}
.title-bar {
position: fixed; /* title bar不随滚动条滚动 */
height: 64px; /* 固定高度 */
width: 100%; /* 宽度同屏 */
z-index: 9999; /* content向上滚动时本元素不被覆盖 */
background-color: black;
}
.side-bar {
position: fixed; /* side bar不随滚动条滚动 */
height: calc(100% - 64px); /* 高度填满同屏除title bar的剩余部分 */
width: 128px; /* 固定宽度 */
top: 64px; /* 上部为title bar */
background-color: grey;
}
.nav-bar {
position: fixed; /* navigation bar不随滚动条滚动 */
left: 128px; /* 左部为side bar */
top: 64px; /* 上部为title bar */
height: 64px; /* 固定宽度 */
width: calc(100% - 128px); /* 宽度填满同屏除side bar的剩余部分 */
z-index: 9999; /* content向上滚动时本元素不被覆盖 */
background-color: lightgrey;
}
.content {
position: absolute; /* 可随滚动条上下滚动 */
left: 128px; /* 左部为side bar */
top: 128px; /* 上部为title bar和navigation bar */
width: calc(100% - 128px); /* 宽度填满同屏除side bar的剩余部分 */
background-color: white;
}
</style>
</html>