Issue
I am trying to create scrollable side menu that is position fixed on top of my content, but the problem is that even if i have overflow-y: auto on the aside element / side menu nothing happens. I want to side menu to always take up the full height of the screen no matter how little content inside.
I need to disable the scroll on the rest of the content while scrolling the side menu so i hid the overflow on the body.
article {
height: 300px;
}
aside {
position: fixed;
top: 0;
min-height: 100%;
width: 23%;
display: flex;
flex-direction: column;
z-index: 3;
overflow-y: auto;
overflow-x: auto;
}
aside article {
background-color: blue;
}
body {
overflow-y: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<aside>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
</aside>
</body>
</html>Solution
You can use inset properties to fix the nav dimensions relative to view port.
Since the problem is solved I am keeping scrollbar on body in the following demo.
article {
height: 300px;
border: 1px solid black;
}
aside {
position: fixed;
display: flex;
flex-direction: column;
z-index: 3;
border: 3px dotted red;
/* my styles */
overflow: auto;
inset: 0 74vw 0 0;
/* or use following */
/*
top: 0;
bottom: 0;
left: 0;
*/
}
aside article {
background-color: #ccf;
}
body {
/* I don't know why you don't want scroll on body */
/* overflow-y: hidden; */
}
body>article {
margin-left: calc(23vw + 0.5rem);
}<article>
<h2>One</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam? Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2>Two</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam? Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2>Three</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam? Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam? Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam? Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<aside>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam? Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam? Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam? Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
<article>
<h2></h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam? Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
</p>
</article>
</aside>Answered By - the Hutt
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.