身高:vh;在移动Chrome中不起作用

时间:2017-02-17 20:47:45

标签: html css css3 height viewport

Chrome未将内容调整为视口

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

1 个答案:

答案 0 :(得分:1)

你的margin-top可能会把它扔掉吗? Calc可能是解决方案

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