html - 高度:vh；在移动 chrome 中无法正常工作

Question

Chrome 没有根据视口(viewport)调整内容

在 firefox 中完美运行

我也在 Opera mini 上测试过它，它也能正常工作。但我不能发布超过 2 个链接

Chrome

Firefox

chrome有没有可能像opera和firefox一样适配？

.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>

Answer 1

会不会是您的 margin-top 将其丢弃？ Calc 可能是解决方案

.intro-noticias {
  width: 100%;
  height: calc(100vh - 70px); /* The full view port height minus the margin */
  margin-top: 70px;
}