如何让datacontain div基于blue-div底部位置实现自适应定位

问题效果展示 #

• 标签内容较短时正常效果：
• 标签内容较长时的覆盖问题：

问题原因 #

• .blue-div设置了position: absolute，脱离了正常文档流，高度变化不会影响下方元素位置，同时.datacontain使用了固定的margin-top: 50px，当blue-div高度超过50px时就会覆盖下方输入区域
• .white-cont设置了固定高度height: 215px，内部内容高度超过限制后会溢出
• HTML结构顺序不符合布局逻辑，需要放在上方的.blue-div写在了.datacontain后面

修改方案 #

1. 调整HTML结构 #

把.blue-div移到.datacontain前面，符合从上到下的渲染顺序

2. 调整CSS样式 #

• 移除.blue-div的绝对定位、固定高度、top偏移属性，改用margin-top: -35px实现上移效果，设置min-height: 70px保证基础高度，内容增多时自动撑开
• 移除.white-cont的绝对定位、固定高度属性，改用margin-top: -25px实现上移效果，设置min-height: 215px保证基础高度
• 调整.datacontain的上边距为合适值，适配调整后的布局

完整修改后代码 #

CSS代码

.responsive {
  width: 100%;
  height: auto;
}
.flex-container {
  display: flex;
  flex-direction: column;
}
.blue-div {
  max-width: 70%;
  min-width: 70%;
  min-height: 70px;
  display: table;
  margin: -35px auto 0 auto;
  background-color: #003777;
  z-index: 130;
  border-radius: 10px;
}
.white-cont {
  width: 80%;
  min-height: 215px;
  display: block;
  margin: -25px auto 0 auto;
  background-color: white;
  z-index: 100;
  border-radius: 10px;
  vertical-align: middle;
  box-shadow: 1px 1px 6px 1px #888888;
  padding-bottom: 20px;
}
.container-sk {
  position: relative;
}
.input-group-addon {
  color: gray;
  background-color: #ffffff;
}
.datacontain {
  margin-top: 20px;
}
.submitButton{
  border-radius: 35px;
  display: block;
  width: 100%;
  border: none;
  background-color: #ef7c24;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

HTML代码

<img src="<?php echo base_url() . 'assets/img/banner.jpg' ?>" alt="Nature" class="responsive">
<div class="container-sk flex-container" style="background-color:#28abe3; min-height:300px">
  <div class="white-cont">
    <div class="blue-div" style="">
      <label style="color:#fff;font-size:14px;display:table-cell;word-wrap: break-word;vertical-align: middle;" >this is voucher 12345 12345 12354 12345 12345 1234 1234 1234 1234 345 345345 345 345 3 </label>
    </div>
    <div class="datacontain col-md-12">
      <div class="">
        <label>phonenumber</label>
      </div>
      <div class="">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon">
              <img style="height:20px;width:20px" src="<?php echo base_url() . 'assets/img/flag.png' ?>">
              +62
            </div>
            <input class="form-control" id="phonenumber" name="phonenumber" type="text" />
          </div>
        </div>
        <div class="col-md-12 mx-auto">
          <button class="submitButton" type="button"> KLAIM VOUCHER </button>
        </div>
      </div>
    </div>
  </div>
</div>

修改后元素都在正常文档流内，.blue-div高度变化会自动把下方.datacontain往下挤，不会再出现覆盖问题，同时白色容器高度也会随内容自动调整。

内容的提问来源于stack exchange，提问作者Talen Tjan