1. Helix (not supported anymore)
  2. Tuesday, 06 March 2018
I have a site, where I want to have the body part at least the full height of the page, so that the footer is always on the bottom of the screen for a small page, and only visible when scrolling for a large page.

This page is working fine: http://wwsolutions-development.be/wing/home-wing
This one not: http://wwsolutions-development.be/wing/essentalia

Wilfried
Accepted Answer
To do this, you need to know the height of your footer.
Let's assume that the height of your footer is 100px

.cn-height section#sp-main-body {
min-height: calc(100vh - 100px);
}

Replace 100px with the actual height of your footer.
Responses (7)
Hi there, There is not enough content inside the body. That's why occurred this situation. Thanks
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 1
Hi Toufiq,

that I know, that is why I want to set the minimum height of the content part to the window-height.
I can not create useless content to make the body bigger.
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 2
Hi there,

Thanks for your reply. Add this CSS class on this menu page display tab.

https://prnt.sc/inxb2h

Add this css code and change the height

.cn-height section#sp-main-body {
height: 1500px;
}


-Thanks
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 3
Toufiq, thanks for the answer, but this seems more a quick workaround to me.
What is needed is a way to make the page full screen, not with setting heights for each page.
The footer of a page should be on the bottom of the screen, or when the page is larger, then it should be visible when scrolling.
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 4
To do this, you need to know the height of your footer.
Let's assume that the height of your footer is 100px

.cn-height section#sp-main-body {
min-height: calc(100vh - 100px);
}

Replace 100px with the actual height of your footer.


Thanks
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 5
Toufiq, thanks for the answer, but this seems more a quick workaround to me.
What is needed is a way to make the page full screen, not with setting heights for each page.
The footer of a page should be on the bottom of the screen, or when the page is larger, then it should be visible when scrolling.


Are you still looking for an answer to this question? You can fix this by changing your margins, I'd be happy to upload a quick video, let me know.
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 6


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.