absolute固定标题，内容滚动问题
<div class="page"> <header class="header-bar"></header> <div class="content"> <ul><li></li>...</ul> </div></div>
布局差不多这样。
page的样式是absolute定位，上下左右都是0，overflow为auto。
header是absolute定位，有高度。
li有很多条,页面可滚动。
我的问题是：在header不为fixed定位的情况空下，当页面滚动的时候，header始终固定在上面，不随着滚动而滚动。
慕的地6264312浏览 1012回答 1
1回答
-
不负相思意
看看是否是你需要的～<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style> .page{ position: absolute; left:10px; top: 10px; width: 300px; height: 500px; overflow: hidden; } .header-bar{ position: absolute; left:0px; top:0px; width: 100%; height: 50px; background-color: #0a6ebd; } .content{ padding-top: 50px; width: 100%; height: calc(100% - 50px); background-color: #ffffff; overflow-x: hidden; overflow-y: auto; } ul{ width: 100%; background-color: greenyellow; height: 1000px; padding: 0px; margin: 0px; } </style></head><body><div class="page"> <header class="header-bar"></header> <div class="content"> <ul> <li></li> </ul> </div></div></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript