How do I achieve a full width navbar and a sidebar which takes up the rest of the height?

lusaxweb / vuesax

New Framework Components for Vue.js 2

https://lusaxweb.github.io/vuesax/

MIT License

5.64k stars 744 forks source link

How do I achieve a full width navbar and a sidebar which takes up the rest of the height? #450

Open CheyenneForbes opened 5 years ago

CheyenneForbes commented 5 years ago

I've been trying to get my vuesax layout to look like the image below without success.

Basically I want a full width navbar with a sidebar which takes up the rest of the height, I want both to be fixed so they arent affected by the page's scroll

yyycapture

CheyenneForbes commented 5 years ago

the navbar is okay, I had set its position to fixed
I tried static-position for the sidebar but it doesnt take up the rest of the page's height and it pushes the page's content under it

jsinhSolanki commented 5 years ago

navbar will be position: fixed and sidebar will have body as parent, which you can implement from prop parent of sidebar component.

In my project I have something like this. <vs-sidebar ref="mainSidebar" parent="body" :hiddenBackground="true" default-index="-1" class="sidebarx" v-model="isSidebarActive">

initially isSidebarActive is set to true. I hope this will work.

CheyenneForbes commented 5 years ago

Didn't work, the top of the sidebar still isn't below the navbar

jsinhSolanki commented 5 years ago

For this. You need to give position: fixed to sidebar and then you will use css's calc() to get the height of your sidebar. And add margin-top to your sidedbar. sidebar css e.g. margin-top: 50px

Now your sidebar will be below your navbar. Next thing is your content-area. for that you will use margin-left because sidebar is set to position fix. So Again use calc() content-area css e.g. margin-left: calc(100% - 260px); margin-top: 50px

let me know if it worked. I think this is CSS related issue than Vuesax. But anyway this is what I suggest.

luisDanielRoviraContreras commented 5 years ago

@CheyenneForbes let me know if you managed to solve, thanks for the contribution

Leftyx commented 5 years ago

I am having the same problem. I've spend a good couple of hours but cannot find the way. Is there anyone willing to share an example ?

rafaelcanoGit commented 3 years ago

Bro i had that issue, after try many things the solution is the parent prop. parent="body" i hope can help you

the navbar is okay, I had set its position to fixed

I tried static-position for the sidebar but it doesnt take up the rest of the page's height and it pushes the page's content under it