This topic contains 3 replies, has 2 voices, and was last updated by Sean Sean 2 months, 1 week ago.

Make navigation and footer full height


  • mikelmao
    Participant

    Posts: 5
    Member Reply #19155

    Hello!

    When there isn’t much page content, the whole page is small if there is also not much in the menu. I have tried applying height 100% to different div’s but it isn’t working.

    How can I make it so that the side navigation is always full height and the footer at the bottom even if the page content/menu is lacking

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #19190

    Hi,

    By right the aside and footer are sticky to the bottom. May I know what browser are you using ?
    How did you produce this issue ? Did you customize anything ? I would suggest you try following:

    1) Get the original theme(latest version v5.5.2).

    2) Try to reduce the aside menu content and retest it.

    By right the above issue should not happen unless you have some issues in the layout(unclosed tag, broken tag or you have modified something improperly).

    Thanks.


    mikelmao
    Participant

    Posts: 5
    Member Reply #19240

    Aah, i did not realise this was not intended functionality.

    I only added 1 div to the page, and for testing i tried removing it and then it went back to normal. I added the <div id=”app”> to below the <body>

    I need this for VueJS to propperly load. How can I add the <div id=”app”> but still have the navigation be full page?

     

    Edit: im already using the latest version of metronic

    • This reply was modified 2 months, 2 weeks ago by  mikelmao.
    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #19365

    Hi,

    Please try to set “style=”height: 100%” for the body tag. If it does not work you will need to try other ways. We can’t provide u fully working code since this extra DIV is not taken into account for the layout.

    For angular version we did not use extra tag and we did it 100% following the original HTML markup. For Vue if you add extra DIVs it will be more work.

    Thanks

You must be logged in to reply to this topic.