边缘增长,宽度较小

时间:2016-01-04 12:43:48

标签: html css height media-queries

我有一个带有margin-top(相对于页面顶部)的框,随着浏览器窗口变小(使用vw)。
但是页面的标题(固定并且在不同的z中) -index)受到最小宽度的限制,所以当它达到1000px时我需要盒子margin-top来停止变小并且星形变大......就像窗口越小,边缘顶部越大。 ..
这是盒子......现在我需要创建一个@media屏幕和(max-width:1000px),它表示相对于大众的高度变大。

#box {
position: relative;
float: left;
width: 100%;
height: auto;
min-height: 350px;
margin-top: 5vw;
}

1 个答案:

答案 0 :(得分:1)

您可以使用calc()

执行此类操作

<强> Fiddle

header {
  background: black;
  height: 50px;
  width: 100%;
}

main {
  background: green;
  margin-top: 10vw;
  height: 100vh;
}

@media(max-width: 768px) {
  main {
     margin-top: calc(150px - 10vw);
  }
}
<div class="container">
  <header></header>
  <main></main>
</div>