首页 > 解决方案 > 最小高度和位置:绝对不能一起工作?

问题描述

我正在制作一个网站并为它定义了一个标题标签。我已经分配了一个最小高度的标题并将其相对定位。但是当我分配position: absolute它的内容时,标题标签不会根据内容增加它的高度。

header {
  background-color: aqua;
  display: block;
  position: relative;
  min-height: 100px;
  overflow: display;
}

.firstpart,
.secondpart {
  position: absolute;
}

.firstpart {
  top: 100px;
  left: 300px;
}

.secondpart {
  top: 100px;
  right: 300px;
}
<header>
  <div class="firstpart">
    <h1>My Name</h1>
    <h2>Student</h2>
  </div>
  <div class="secondpart">
    <h1>Welcome to my website.</h1>
    <h2>Want to give a feedback?</h2>
  </div>
</header>

标题保持 100 像素的高度,第一部分和第二部分显示在其下方。当我删除绝对定位并一一添加内容时,标题会根据内容增加其高度。任何人都可以帮忙吗?

标签: htmlcsscss-selectorscss-position

解决方案


推荐阅读