Hi, I think that ink needs a way to fix the footer at the bottom of the page.

Hello <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-ur

Adding overflow: auto; to the <code class="notranslat

fix footer at bottom about ink HOT 10 CLOSED

sapo commented on June 12, 2024

fix footer at bottom

from ink.

Comments (10)

pedrocorreia commented on June 12, 2024

Hi again metropt.

That type of footer is a sticky issue (pun intended), as it requires knowledge of the footer height and some css / html trickery to work properly. So we opted to not include it as an out of the box solution.

What we are doing when using ink to build site and need a sticky footer is to implement Ryan Faits' Sticky footer.

from ink.

metropt commented on June 12, 2024

thanks for the tip :)

from ink.

metropt commented on June 12, 2024

Do you have any example of a page where you use it?

Thanks

from ink.

pedrocorreia commented on June 12, 2024

We have some ongoing projects that use it but they're not public, so i've cooked cooked up a simple example:

http://jsfiddle.net/ysRrr/1/

Basically you'll need a element that wraps the whole page, except the footer itself.
A "pusher" element that sits immediately before the wrapper close tag with the same height as the footer.
And some css to make the whole thing work.

This is the basic structure you'll need:

https://gist.github.com/pedrocorreia/5047398#file-stickyfooter-html

Check out the example and let me know if i can help with anything.

from ink.

metropt commented on June 12, 2024

Hi,
Really thank you for your example but it didn't work properly in a simple example I've done 🈂️
http://josescxavier.com/testes/footer/footerteste.php

from ink.

pedrocorreia commented on June 12, 2024

I think you forgot to include the <body> tag in your page.

I just did a wget on that url and the resulting document does not contain a body tag. That weird space is created when the browser tries to fix mistakes or omissions in the document.

Wget output from your page url: https://gist.github.com/pedrocorreia/5056205#file-no-body-html

from ink.

metropt commented on June 12, 2024

I added the body tag but the result is the same :s Thanks for your help

from ink.

pedrocorreia commented on June 12, 2024

Ok, let me have another look then.

from ink.

andr3 commented on June 12, 2024

Hello @metropt,

here's my stab at this.

You have several problems in your demo that, while not directly connected to the issue you're seeing, will sting you later, one way or the other.

Here they are in form of a short list. ;)

Absent doctype. This will make browsers switch into quirks mode. You don't want that, it will induce weird behaviors on a lot of issues in the rendering of your pages. Add <!doctype html> to the first line, like in @pedrocorreia's example.
Absent <html>. You want it there, trust me. ;)
You have a <div class="wrap"> before the <head>. This causes the browsers to start rendering a fake <body> tag and dumping all the <head> contents into it. Again, weird stuff will start happening, like FOUC (google it to know more ;) ). Move it to the first thing inside the <body> tag.

Now all these issues are for your sake, but won't fix the issue you're complaining about.

This is directly attributed to the (collapsing of the) margin-top in .ink-vspace. What happens is that the element pushes away what's before. Since there's nothing, the <body> will come down a notch. Add to that notch 100% height to it and you get 100% + 32px (the margin-top).

You can fix this but either:

remove .ink-vspace
override the styling and make that .ink-vspace specifically have a margin-top: 0; and a padding-top: 32px;
Make the margin-bottom: -100px; on the .wrap be margin-top: -132px; (adding the 32px).

Let us know if any of these fixed it for you and which one you went with.

This will help you get your demo working, but this raises an issue for us. I think we should revise why .ink-vspace is using margins instead of paddings. Paddings don't collapse, margins do. And we can control how paddings affect (real) width with box-sizing.

This won't, however, be fixed on the current version of the library, since it would break existing layouts horribly. But will influence future releases, for sure.

Thanks a lot for your feedback and questions. It might have given us an opportunity to iron out a small but important bug.

from ink.

pedrocorreia commented on June 12, 2024

Adding overflow: auto; to the .wrap class also fixes it.

div.wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
    overflow: auto;
}

from ink.

fix footer at bottom about ink HOT 10 CLOSED

Comments (10)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent