height: vh; does not work as it should in Chrome mobile

Asked

Viewed 381 times

1

Chrome is not adapting content in the viewport

In Firefox and Opera mini is adapting perfectly

Chrome

inserir a descrição da imagem aqui

Firefox

inserir a descrição da imagem aqui

Opera mini

inserir a descrição da imagem aqui

Chrome can adapt like Firefox and Opera?

.intro-noticias {
  width: 100%;
  height: 89vh;
  margin-top: 70px;
}

.intro-noticia-1 {
  width: 50%;
  height: 100%;
  float: left;
  border-right: 2px solid #000;
  position: relative;
}

@media only screen and (max-width: 500px) {
 .intro-noticia-1 {
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #000;
}

}
<div class="intro-noticias">	
	<div class="intro-noticia-1">
	 	<a href="#">
		<div class="intro-post-thumbnail">
		<div class="intro-noticia-main-caption">
			<h2></h2>
		<div>
			<span class="intro-main-caption-autor"></span>
			<span class="intro-main-caption-time"></span>
	  </div>
	 </div>
	 </div></a>
	</div>
 </div>

html css css3 height viewport

  • You can put an example that shows the problem with code and not just image?

  • The code is below the images, I even gave a simplified to facilitate understanding

  • Did you set up the viewport in the <head>? Only the <div> excerpt is not enough to reproduce the problem, it would be good a [MCVE] that includes a complete HTML (simplified, as instructions on the link).

  • Yes, I set <meta name="viewport" content="width=device-width, initial-Scale=1">

  • This is the structure, its content is formed by php and wordpress functions, I do not think is relevant

  • 1

    @Gabrielsouza I saw that the code is underneath but I don’t see any image or text. Hence it doesn’t reproduce the example and this would be desirable.

Show 1 more comment

1 answer

1

example:

.intro-noticias {
  width: 100%;
  height: 89vh;
  height: 200px; 
  margin-top: 70px;
}

The browser sees height: 200px, If the browser understands the vh drive, it will use 89vh instead of 200px;

hope I’ve helped

Browser other questions tagged html css css3 height viewport

You are not signed in. Login or sign up in order to post.