Header at the top, footer at the bottom and content after he

Topic: Header at the top, footer at the bottom and content after header

camlynfx free asked 5 years ago

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?

Add comment

Marta Wierzbicka staff answered 4 years ago

0 0 Best answer

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

Add comment

Curtly free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

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

Add comment

camlynfx free answered 5 years ago

0 0 Best answer

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.

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer