Sticky footer and safari

HTML & CSS
1

I have a page at http://dot.kr/joon/007/
The page is well shown in chrome, fireFox and opera.
But in Safari, the sticky footer is not sticky on the bottom of the browser.

Can I fix it with your help?

2

You might need some vendor prefixes in there for Safari. flex display is pretty new and not fully supported yet. E.g.

html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	display: flex;
	[COLOR="#FF0000"]display: -webkit-flex;[/COLOR]
	height: 100vh;
	flex-direction: column;
	[COLOR="#FF0000"]-webkit-flex-direction: column;[/COLOR]
}
.content {
	flex: 1;
	[COLOR="#FF0000"]-webkit-flex: 1;[/COLOR]
	overflow:auto;
}
main.content { background:blue }
header, footer { background:red; }
p { margin:1em }
3

I applied your code at http://dot.kr/joon/015/.
But it seems not to work as I expected.
The sticky header is not always on the head of the browser in Safari.
And the sticky footer is neither always on the footer of the browser in Safari.

4

It’s working fine on Safari on a mac.

If you are using safari on a pc then that has been discontinued in 2012 and is not supported any more. Flex box or any current css will therefore not work properly on it. There will be very few users of safari on windows these days apart from developers.