iPhone fixed content with browser address bar

I have a fixed div 100% size in my html. But when I am on iPhone in landscape mode and I tap on the top of the screen, I get safari browser url showing over the top of my content. Is there a way to make css so that my content moves down when browser url shows? Or in any other way not cover the top of my content?

Example of my content:

.a{
  position:fixed;
  top:0;
  left:0;
  width:100% ;
  height:100% ;
  background:red;
  color:#fff;
  font-size: 30px;
}
<div class="a">
Lorem ipsum dolor sit amet.
</div>