absolute固定标题，内容滚动问题

发布于
2017-03-17

<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始终固定在上面，不随着滚动而滚动。

html5 html css javascript

阅读 3.5k

3 个回答

得票最新

kikong

19.1k31320

发布于
2017-03-17

✓ 已被采纳

看看是否是你需要的～

<!DOCTYPE html>
<html lang="en">
<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>