スマホサイトで、上部メニューを固定にした時のコンテンツの位置を端末すべてで同じにしたい。

スマホサイトを作ってます。
上部メニューを固定にしてz-indexを999に。下のコンテンツはスクロールの際メニューの下に潜るようにしてます。
上部メニューはpng画像で640x110pxを100vwで表示、下部分を波線にしてます。
その下はスクロール画像です。

この状態で、スライドのmarginをpx固定で指定すると端末によって隙間が出来たり大きく重なったりします。
(windows chromeのデベロッパツールで確認)
しょうがないので、padding-topを指定しスライド背景に画像を配置してみました。marginとpaddingをvhで指定してみましたが、変わらず大きくかぶさったり余白が出たりしてしまいます。

どうにかしてすべての端末で変わらず波線の上部分ぴったりにスライドを表示する方法は無いでしょうか?