[CSS] Safari 的坑: 100vh

前陣子在實作 RWD 時，
想要達到頁面高度為裝置高度，超過則由內層的元件做滾動的效果。

大概像是這樣子：

所以我把最外層的 div 設為 100vh，
結果發現在 iPhone 上看起來是這樣子：

最外層居然可以滾動?!

仔細看了一下，最外層可滾動的高度，
大約是網址列的高度加上工具列的高度。

也就是說，在 Safari 中的 100vh，

是包含網址列和工具列的!!

 查了一下，發現這似乎是個很常見的問題。

之前有人回報的這個問題，得到 Apple 工程師的回覆是
"It wasn't a bug, it's a feature."

或許是因為 Safari 在往下滾動一定高度時，
會縮小網址列並收起工具列，
這時 100vh 就會是滿版的高度。

不過設定為 100vh 可以滾動的高度，
並不足以讓他收起網址列 & 工具列。
加上我也不希望他可以滾動或是被裁掉。

我的解決方法是:
使用 window.innerHeight 動態設定最外層 div 的高度

使用 React 的 styled-components 可以輕鬆做到這點

const Container = styled.div<{maxHeight: number}>`
    height: ${props => props.maxHeight}px;
    overflow: hidden;
`;

export const Layout: React.FC = props => {
	return <Container maxHeight={window.innerHeight}>
		{props.children}
	</Container>
} 

這樣頁面就能夠好好固定在中間啦~