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;
}

问题的生活演示可以在这里找到：Current Progress

提前致谢！

永旺

Answer 1

我无法找到解决问题的方法所以我决定制作绝对定位屏幕宽度依赖，只出现在1170px及以上的屏幕上。较小的屏幕将看到具有一些更改属性的相对格式。

问题可以结束。

高度和绝对定位的HTML / CSS问题

1 个答案: