CSS如何使这个高度响应?

时间:2017-10-19 14:22:44

标签: html css height css-position

.wrapper {
  margin: 7%;
  height: 79vh;
  background-color: green;
  background-size: 300px;
}
<section class="wrapper">
  <h1>TEST</h1>
</section>

正如你可以看到它有点反应但当我关闭窗口到1200px以下时顶部将有更多的空白区域,然后是底部,我该如何解决这个问题?

我也使用了vh,但是这对于定位来说有点肮脏。如果我没有身高,它只会显示第一个<h1>其他方式吗?

1 个答案:

答案 0 :(得分:1)

这是你的想法吗?

&#13;
&#13;
.wrapper {
    position:absolute;
    top:50%;
    left:50%;
    height:60%;
    width:60%;
    background-color: green;
    transform:translate(-50%,-50%);
}
&#13;
<section class="wrapper">
            <h1>TEST</h1>
</section>
&#13;
&#13;
&#13;