Sam Thorogood solves a simple HTML problem: your great design doesn’t always fit to the whole page.
26 Comments on "Fit to Page (The Standard, Ep. 2)"
great mini tips, keep going
In the example on codepen need to add "box-sizing: content-box" to #footer. It helps prevert showing scrollbars. Because now #footer has "width: 100%" and "padding: 4px;" and it extends #footer beyond viewport
Can I do 100% instead of 100vh?
Great tip. Thank you Sam. 🙂
Your linked codepen example in the description does not work for me in chrome.I still get scrollbars..
So when doing this with a then absolutely positioned footer, the footer will overlap the very bottom piece of content when the window is small enough, unless that main element above the footer is given padding-bottom equal to the height of the footer div? I found myself having to do this to prevent the footer overlapping the main content div. Is that the way it's meant to be done?
You can set the "100vh" on your content div
Is there a solution for the 100vh issue on iOS Safari being larger than the initial visible height with the top and bottom toolbars?
More of these, please!
In CodeChannels.com, you can learn to code by watching videos and stay up to date with latest code shows, events and tutorials aggregated from various leading developer communities.
Copyright 2016 By CodeChannels.com All rights reserved.