Высота: автоматическое расширение с минимальной высотой - PullRequest
Новая
       23

Высота: автоматическое расширение с минимальной высотой

0 голосов
/ 07 июня 2018

У меня возникли проблемы с получением .gridSecBlock для расширения на height:auto в моем окне просмотра <640. Если вы нажмете на ссылку jsfiddle ниже и измените область просмотра на размер менее 640 пикселей, вы увидите, что <code>.gridSecBlockсодержание .gridText не расширяется так, как должно быть с height: auto.У меня есть набор min-height, но я не хочу настраивать его для большого количества медиазапросов.

Тогда по какой-то причине мой класс total-center не центрирует .gridSecBlock по вертикали для блоков контента.

Кто-нибудь видит, что я делаю неправильно?

Ссылка Jsfiddle для просмотра мобильного видового экрана 

.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>

1 Ответ

0 голосов
/ 07 июня 2018

Я думаю, что вы можете достичь того, чего хотите, с помощью 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>
...