Postingan lainnya
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
<a href='http://saepudin.xyz/alq.html'>demo</a>
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>
0
1 Jawaban:
Tanggapan
pada saat di mobile 100% itu tidak full kebawah menu sidebar nya silahkan coba demo dan perhatikan menu sidebar nya
saya coba di chrome v75 normal aja.