高度：自动扩展最小高度答案

【问题标题】：Height:auto expanding with min-height高度：自动扩展最小高度
【发布时间】：2018-11-17 17:53:24
【问题描述】：

我在将.gridSecBlock 扩展为height:auto 在我的视口.gridSecBlock对于内容.gridText 没有像height: auto 那样扩展。我有一个min-height 集，但不想为这么多的媒体查询调整它。

然后由于某种原因，我的 total-center 类没有将 .gridSecBlock 垂直居中用于内容块。

有人看到我做错了吗？

Jsfiddle link to see mobile viewport

.total-center {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
.left {
	float: left;
}
.right {
	float: right;
}
.gridSecCont {
	display: block;
	height: 70vh;
}
.gridSecWrap {
	width: 100%;
	position: relative;
}
.gridSecBlock {
	width: 50%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	position: relative;
	overflow: hidden;
}
.gridSecBlock img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gridSecText {
	text-align: left;
}
.gridSecBlockWrap {
	width: 65%;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/

@media screen and (max-width:640px) {

/*--- Grid Section --*/
.gridSecCont {
	display: block;
	height: auto;
}
.gridSecBlock {
	width: 100%;
	height: auto;
	display: block;
	min-height: 270px;
}
.gridSecBlockWrap {
	width: 75%;
	height: auto;
	padding: 10px 0;
}

}

<section id="gridSec">
			<div class="gridSecWrap">
				<div class="gridSecCont">
					<div class="gridSecBlock left">
						<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
					</div><div class="gridSecBlock right gridText">
						<div class="total-center gridSecBlockWrap">
							<p class="dG gridSecText">
								"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
							</p>
						</div>
					</div>
				</div>
				<div class="gridSecCont">
					<div class="gridSecBlock right">
						<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
					</div><div class="gridSecBlock left gridText">
						<div class="total-center gridSecBlockWrap">
							<p class="dG gridSecText">
								"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>

【问题讨论】：

这似乎与.total-center 是position:absolute 相关，这会将其从正常的document flow 中移除，并将其容器的高度呈现为零。

标签： html css height vertical-alignment

【解决方案1】：

我认为使用 flexbox 可以更轻松地实现目标。我稍微清理了一下，去掉了看似不必要的 div 和其他样式。

也将其放入代码笔中：https://codepen.io/samandalso/pen/MXbYNz

.gridSecCont {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
}

.gridSecWrap {
  width: 100%;
  position: relative;
}

.gridSecBlock {
  overflow: hidden;
  flex-basis: 50%;
}

.gridSecBlock img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gridSecText {
  text-align: left;
  flex-basis: 50%;
  padding: 3rem;
}


/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/

@media screen and (max-width:640px) {
  /*--- Grid Section --*/
  .gridSecCont {
    display: block;
    height: auto;
  }
  .gridSecBlock {
    width: 100%;
    height: auto;
    display: block;
    min-height: 270px;
  }
  .gridSecBlockWrap {
    width: 75%;
    height: auto;
    padding: 10px 0;
  }
}

<section id="gridSec">
  <div class="gridSecWrap">
    <div class="gridSecCont">
      <div class="gridSecBlock left">
        <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
      </div>
      <div class="gridSecBlock right gridText">
        <p class="dG gridSecText">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
      </div>
    </div>
    <div class="gridSecCont">
      <div class="gridSecBlock right">
        <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
      </div>
      <div class="gridSecBlock left gridText">
        <div class="total-center gridSecBlockWrap">
          <p class="dG gridSecText">
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

【讨论】：