Topic: Fixed footer hiding last couple of lines of body

AJEsler2019 premium asked 1 year ago


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


Dawid Wajszczuk staff answered 1 year ago


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 premium commented 1 year 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 premium commented 1 year 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 1 year ago

You can try adding padding-top the same way. Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3454257.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Premium
  • 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