亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

absolute固定標題，內容滾動問題

absolute固定標題，內容滾動問題

慕的地6264312 2018-10-26 18:15:31
<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始終固定在上面，不隨著滾動而滾動。
查看完整描述

1 回答

?
不負相思意

TA貢獻1777條經驗 獲得超10個贊

看看是否是你需要的～

<!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>


查看完整回答
反對 回復 2018-11-27
  • 1 回答
  • 0 關注
  • 1025 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號