高さ100vhを設定すると、スマホのsafariで見た時アドレスバーの高さ分高さがずれる

<!doctype html>
<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>無題ドキュメント</title>
	<link href="css/reset.css" rel="stylesheet" type="text/css">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
	var windowWidth = window.innerWidth;
var windowheight = window.innerHeight;
//980px以下で発火するようになってますので適宜調整して下さい
if (windowWidth <= 980) {
  $(".header").css('height', windowheight);
}
	</script>
	</head>

	<body>
    <div class="header"> 
<img class="pic" src="img/pic.png" width="467" height="467" alt=""/>
      <div class="ue"> </div>
      <div class="sita"> </div>
    </div>
</body>
</html>

@charset "UTF-8";
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

body {
	width: 100%;
	color: white;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13px;
	line-height: 1.5;
}
.header {
	height: 100vh;
	width: 100%
}
.ue {
	width: 100%;
	height: 50vh;
	background-color: #fff;
}
 .sita {
	width: 100%;
	height: 50vh;
	background-color: #000;
}
.pic {
	width: 30%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

height:100vhを設定すると、スマホのsafariで見た時heightがずれる問題について解決策を伺いたいです。

画面を上下二つに分け、上を白、下を黒といったファーストビューに設定し、その中心に画像がハマるようにしたいのですが、Chromeで見た時は大丈夫なんですがsafariで見た時にどうしても縦横高さど真ん中に設定したはずの画像が上に上がってしまいます。

以前、質問した時に、このせいじゃないかと教えてもらったURLがあり（こちら→https://www.sho-yamane.me/1869）その通りに記述してみましたが直りませんでした。

画像を中心に持ってくるやりかたはこちらのサイトを参考にしました→http://bashalog.c-brains.jp/14/08/06-100100.php

どうしたら真ん中がずれずにsafariで見ることが出来るか、ご享受下さい。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1
2$(".header").css('height', windowheight);
3
4

ここで高さが設定されているのでvhの記載は不要です。
あと**.picのabsoluteの基準をheaderにしてあげること**で解決すると思います。

css
1.header {
2    width: 100%;
3    height: 100vh;
4    position: relative;//追加
5}
6.ue {
7    width: 100%;
8    height: 50%;//変更
9    background-color: #fff;
10}
11 .sita {
12    width: 100%;
13    height: 50%;//変更
14    background-color: #000;
15}
16.pic {
17    width: 30%;
18    height: auto;
19    position: absolute;
20    top: 0;
21    left: 0;
22    right: 0;
23    bottom: 0;
24    margin: auto;
25}

どうしてもvhで実装したい場合は
calcを使用してアドレスバーとタブの高さ分、100vhから引く必要があります。(スマホのsafariのアドレスバーの高さは調べてもらえますと幸いです)

css
1.header {
2    height: calc(100vh -80px);//仮に引く数値を80pxに設定した場合
3    width: 100%
4}
5.ue {
6    width: 100%;
7    height: 50%;
8    background-color: #fff;
9}
10 .sita {
11    width: 100%;
12    height: 50%;
13    background-color: #000;
14}