Topic: Fixed footer hiding last couple of lines of body
Expected behavior I expect to be able to see the full body of the screen when using a fixed footer. One of the examples in the footers section uses a fixed pixel height of 3000px to enable all of the main body to be seen. This approach is not practical for me as I run reports of varying lengths from a couple of lines to several thousand lines.
I would like to either auto hide the footer, with it becoming visible with a click anywher on any element within the main body or have the height of the main body auto set to make the last couple of lines visible. Any help will be appreciated.
Actual behavior The last couple of lines remain hidden behind the footer and are not visible when scrolling to the bottom of the screen.
The behavious is demonstrated at "Fixed footer not showing last couple of lines"
https://mdbootstrap.com/snippets/standard/ajesler2019/3445749/
Resources (screenshots, code snippets etc.) Just add additional paragraphs if this isn't tall enogh for your screen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
© 2020 Copyright: MDBootstrap.com
Hi,
You can simply add padding bottom to main section which contains these paragraphs. Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3451033 in which I have set padding bottom to 100 pixels because footer is 100 px height.
Keep coding,
Dawid
AJEsler2019 pro premium priority commented 3 years ago
Thanks for this Dawid. I realised I was over thinking this problem. Just added
immediately before the footer navbar which created the margin I needed as well
AJEsler2019 pro premium priority commented 3 years ago
Sorry, should have added. When I tried the padding-bottom, it had the effect of moving the main body beneath my fixed top navbar per the following:
https://mdbootstrap.com/snippets/standard/ajesler2019/3451675/
Hence I looked for simplest solution of adding
immediately prior to bottom navbar
Dawid Wajszczuk staff commented 3 years ago
You can try adding padding-top the same way. Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3454257.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes