Topic: Header at the top, footer at the bottom and content after header
Could anybody show me how to setup this layout below?
This is my sample layout.
<header> MD Navigation </header>
<div>Some page level content here</div>
<footer>Footer content here</footer>
Let's say I am viewing my page on quite a large screen - I want to keep the Nav at top and followed by any page content, and footer showing at the bottom of the page even if there was a single line of text in the page content section.
if page content has lots of info then it should expands downwards taking as much space as it requires and the footer doesn't have "stick" at the bottom like a sticky nav bar. Footer can just scroll down.
How do I achieve that?
Hi,
do you need something like this: https://mdbootstrap.com/snippets/jquery/marta-szymanska/444398?
Best, Marta
I can see you have positioned the footer absolutely. The issue with this approach is that I will have to set bottom margin or padding for the "main" so that footer don't overlap the content. Correct?
I was thinking it to work kind of similar to flexbox "d-flex justify-content-between" but vertically.
Hi,
if you have a small amount of content, it will be the right solution with position absolute. But if you have a lot of content and you can scroll vertically your page, you don't need any special settings for footer because it will be on the bottom anyway.
Best, Marta
I'm having a similar problem. I want my footer to be at the bottom regardless of the content on the page.
My content is displaying info from a database. When the list will is small, .fixed-bottom will keep the footer at the bottom but when the list gets large .fixed-bottom will hide the content. If i remove .fixed-bottom the footer will be at the middle of the page when the list is small but it will be at the bottom when the list is large.
I want to footer to be at the bottom without blocking the content regardless of the size of the list.
Hi,
would you create a snippet showing an example of your problem or show me the demo of your site? I'll try to help you.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.4
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No