Postingan lainnya

Buku Ini Koding!

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

Kelas Premium!
Belajar bikin website dari nol sekarang

Gunakan kupon "lebihcepat" untuk diskon 25%!

Flex position fixed tidak mau menutupi bottom

position fixed tidak mau menutupi sampai kebawah di chrome versi 74 mobile / latest version . selain chrome semua aman harap buka di mobile

sass

html, body{
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1 0 auto;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: auto;
    min-height: 0;

}

.box-parent{
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;

}

.box-child{
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex: 1 0 auto;
    position: fixed;
    top: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
    background: blue;
    z-index: 999999999;

}

.pren{
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./assets/sass/style.css">

    <title>EP ADMIN</title>
</head>

<body class="sidebar-vertical">

    <div class="box-parent">
        <div class="box-child">
            <p>je</p>
        </div>
    </div>

    <div class="pren">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab odio vero, iste, similique praesentium dolores doloribus quos voluptatem veritatis voluptatibus excepturi! Eligendi accusantium aperiam maiores omnis sint veritatis blanditiis mollitia.</p>

    </div>

</body>

</html>

css html

@saepudin2000

17 Kontribusi 3 Poin

Diperbarui 5 tahun yang lalu

1 Jawaban:

bisa di perjelas lebih dalam lagi?

@ledihildawan

23 Kontribusi 16 Poin

Dipost 5 tahun yang lalu

Tanggapan

pada saat di mobile 100% itu tidak full kebawah menu sidebar nya silahkan coba demo dan perhatikan menu sidebar nya

@saepudin2000

saya coba di chrome v75 normal aja.

@ledihildawan

Buku Ini Koding!

Kelas Premium! Belajar bikin website dari nol sekarang

Flex position fixed tidak mau menutupi bottom

Kelas Premium!
Belajar bikin website dari nol sekarang