position:fixed的top:0与bottom:0配合的妙用

最新推荐文章于 2023-06-04 22:58:10 发布

劲枫

最新推荐文章于 2023-06-04 22:58:10 发布

阅读量3.6k

点赞数

分类专栏：前端文章标签： position:fixed妙用

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/86776150

版权

前端专栏收录该内容

60 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="box">
    <div class="left">

    </div>

    <div class="right">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
        </ul>
    </div>
</div>
</body>
</html>
<style>
    .box {
        background-color: #21201a;
        white-space: nowrap;
        position: fixed;
        width: 100%;
        top: 100px;
        bottom: 100px;
    }

    .left {
        width: 100%;
        height: 100%;
        background-color: #1e5cff;
        display: inline-block;
    }

    .right {
        width: 100%;
        height: 100%;
        background-color: #1aff5a;
        display: inline-block;
        overflow: hidden;
        transform: translate3d(-500px,0,0);
    }</style>

应用场景

1、在需要固定侧导航栏的应用场景中

2、手机适配有的

一个div需要固定在屏幕中间，上下各留白，比如top:100px;bottom:100px,

那么对于长短不一的手机，均会上下各留100px，