HTML / CSS问题，高度和绝对位置

Question

我遇到了一个问题，这让我一直感到头痛。 该解决方案可能很简单，但我严重找不到。 如果您能帮助我，那就太好了！

我的问题很难描述，但我会尽力而为。

目前，我正在为网站设计新布局，但内容高度和绝对定位存在问题（问题是CSS）。 只要该部分的内容不高于屏幕高度，一切看起来就很好。 一旦不再是这种情况，内容将与页面上的任何其他内容重叠，并且将被完全弄乱。

这是HTML：

<section id="section1" class="section">
<div class="container">
  <h1>Heading</h1>
  <p>Text</p>
  <div>
    Other content
  </div>
</div>

这是CSS：

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.container::after {
  content: '';
  display: table;
  clear: both;
}
.section {
  min-height: 100%;
  position: relative;
  padding: 32px 0;
  line-height: 1.6;
  color: #1a1a1a;
  z-index: 5;
}
.section .container {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
     -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
       -o-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

问题的生活演示可以在这里找到： 当前进度

提前致谢！

永旺

Answer 1

我找不到解决问题的方法，所以我决定根据屏幕宽度来确定绝对定位，并且只出现在1170px以上的屏幕上。 较小的屏幕将显示具有某些已更改属性的相对格式。

问题可以结束。