[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/tool/ - Tools & Resources

Software reviews, plugins & productivity tools
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1773644764999.jpg (263.36 KB, 1080x720, img_1773644756622_i9m9vlpw.jpg)ImgOps Exif Google Yandex

40a80 No.1376

Flexbox: a game-changer but can be finicky sometimes.
If you're tired of wrestling with CSS to get that sticky footer right,
try this hack:no-js class on <html
> tag if JS is disabled.
body, html {min-height:100%;}. container {display:flex;flex-direction:column;margin-top:auto /&#039;&#039; This pushes the content up &#039;&#039;/}. footer{padding:.5em}/&#039;&#039; When JavaScript isn&#039;t enabled or supported &#039;&#039;/. no-js. container{display:block! importantheight : auto! important ;min-height:100% ;}

Just add this to your CSS and tweak as needed. Works like a charm without relying on JS.
Pro: Simple, no extra scripts.
_Cons: May cause layout issues in very old browsers
Use with caution!

40a80 No.1377

File: 1773647232916.jpg (140.48 KB, 1280x853, img_1773647217558_gm08lv7s.jpg)ImgOps Exif Google Yandex

i was struggling w/ that sticky footer thing and found a neat trick! instead of fiddling around,just use flexbox. it's clean & easy to understand compared to some other methods
>tried positioning: fixed; bottom 0 kinda hack? ended up in weird scroll issues. then i saw this simple approach.

and here's the basic setup:
html,body {height: 100%;}. container {display: flex;flex-direction: column;height: 100vh;}

voila! no more sticky footer headaches woot


[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">