KPC
Kevin Powell - Community•4w ago
Keita & Akira

Confused on how to approach this Layout

Hello. Hope you are having an amazing week. PROJECT EXPLANATION I was looking for website inspiration to learn new things and came across this site: https://www.wallofportfolios.in/portfolios/ayaneshu-bhardwaj/ and I wanted to give it a try but on a different setup. Instead of having it as a sidebar, my navbar will be on top. The content will be inside the GREY AREA and should have a fixed margin from both the top and bottom. exactly the same, so it accounts for the header height. MY PROBLEM @_@ I just cannot seem to understand how to approach this layout. Tried using 100vh but either I am doing it wrongly or is not the right approach. Content will stay inside the square, and will be scrollable INSIDE the square, but without scrollbars.
5 Replies
Keita & Akira
Keita & AkiraOP•4w ago
Result should be this.
Keita & Akira
Keita & AkiraOP•4w ago
So, something like this.
No description
Chris Bolson
Chris Bolson•4w ago
This could be achieved in several ways. One method would be to give the main element a fixed position with an inset (top, right, bottom, right) position of X (where X = the margin) and an overflow of scroll. Likewise the "nav" element would also have a position fixed, it's height being X, ie the same as the margin set for the main element to ensure that it doesn't overlap. You can hide the scrollbars with CSS for most browsers with something like this: 
.your_element{
  
  /* hide scrollbars */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge Legacy */
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }
}
.your_element{
  
  /* hide scrollbars */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge Legacy */
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }
}
I have a demo of this on Codepen if you would like to see it in more detail.
StefanH
StefanH•4w ago
Keita & Akira
Keita & AkiraOP•4w ago
@Chris Bolson@StefanH Sorry for the delay, I had a really horrible and busy day. Anyway, thanks a lot, this was really helpful! Wish you a wonderful day/week.

Did you find this page helpful?