center absolutely with footer

[kamikat]

In a typical login scenario, use scut-center-absolutely to absolutely center the box containing username/password form.

But, when the page has a footer, the box is not visually centered vertically.

• If a fixed-height footer is used, the vertical location (margin-top) of the box should be move up by half of the footer height to make the box visually centered. (which is possible with scut-center-transform and user-specific margin-top: - $footer-height rule applied on the sign-in box)
• If a dynamic height footer is used, the solution can be use an relative positioned element with a height of "visual content area" (area subsctract body with footer). But I'm sorry that I can't get the idea work...

The latter one seems to be the "perfect" solution to the problem but I'm wondering if it is possible to assign the height of element containing sign-in box with "visual content area".

[davidtheclark]

Ok, so this isn't a problem with the sticky footer mixins -- just a particular layout you are struggling with, right? Or were you thinking that the Scut utilities could change in some way to accommodate such a use-case?

Well, without changing the utilities I do have a couple of suggestions -- maybe they'll work for you.

• For fluid-height footer: http://codepen.io/davidtheclark/pen/jazEh. I'm setting display: table-row; height: 1px; on the header just like the utility does on the footer. Then display: table-row on the element .login-container --- and it should fill up that space between the header and the footer. But table display messes up positioning, so the absolute centering won't work: instead, I'm using scut-vcenter-ib to center the login element itself.
• For fixed-height footer (with optional fixed-height header): http://codepen.io/davidtheclark/pen/ImJdi. You actually don't need to use the scut-fixed-sticky utility at all -- in that layout everything is just absolutely positioned.

Do either of those work for you?

[kamikat]

Thanks for your help. And the first solution hits exactly the one I'm struggling toward.

It is a fantastic idea that scut should be a library aimed more at generous stylesheet design/code pattern than browser compatibility. But I'm sorry that I have not enough experience in website design & development (especially handling architecture of the page).

It's exciting to see that scut is under active development and I believe that I'll learn more from your work. Thank you.

[davidtheclark]

Glad that method worked for you @shinohane. Please me know if you run into any browser compatibility issues with it. And thanks for your input!