CSS - динамическая высота

Я пытаюсь создать флип-карту с динамической высотой в зависимости от элементов внутри нее. Прямо сейчас у меня явно установлена ​​высота 250 пикселей, но в идеале я хотел бы, чтобы размер был динамическим. Это возможно?

Я пробовал установить высоту на 100%, но это явно не сработало. Я также пробовал сделать flexbox, но это тоже не сработало. Кроме того, я также пробовал использовать min-height = 250px ... не уверен, почему это тоже не работает. Приветствуются любые уроки о том, как правильно определять CSS!

Вот мой HTML и CSS:

label {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  width: 100%;
	height: 250px;
  cursor: pointer;
}

.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}

.card div, .card span {
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;	
}

.card div {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card .back {
  background: $color-lightest;
  color: $color-darkest;
  border: 1px solid $color-darkest;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

input {
  display: none;
}

:checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

.icon-color, .icon-background {
  color: $color-accent-light;
}

.front.icon-color {
  z-index:100;
}

.card .front, .card .back {
  padding:1.5em;
}

.card .front {
  background: $color-darkest;  
}

.title{
  text-align:center;
  color: $color-lightest;
}
<label>
  <input type = "checkbox"/>
  <div class = "card">
    <div class = "front">
      <span class = "fa-stack fa-5x">
        <i class = "far fa-circle fa-stack-2x icon-background"></i>
        <i class = "fa fa-user fa-1x icon-color" aria-hidden = "true"></i>
      </span>
      <h2 class = "title">My Information</h2>
    </div>
    <div class = "back">
      <h3>Header</h3>
      <h5>Subheader</h5>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
    </div>
  </div>
</label>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
2 736
3

Ответы 3

да. Возможно.

height: auto;

https://developer.mozilla.org/en-US/docs/Web/CSS/height

Пока у вас есть жестко запрограммированное значение 250 пикселей, это будет невозможно.

Спасибо @hcs, попробовал установить высоту: авто; на <label>, но почти полностью сжимается

Dave 25.10.2018 23:10

Просто позволить браузеру вычислить высоту должно работать. Так что не указывайте высоту. Но мне также пришлось перевести вашу карту, чтобы показать, где она должна быть после поворота на 180. Так может это твоя проблема?

label {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: flex
  flex-direction: column;
  height: 100%;
  width: 100%;
  cursor: pointer;
  background: red;
}

.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}

.card div, .card span {
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;	
}

.card div {
  position: absolute;
  //height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card .back {
  background: wheat;
  color: black;
  border: 1px solid grey;
  -webkit-transform: rotateX(180deg) translateY(100%); // translate missing?
  transform: rotateX(180deg) translateY(100%); // translate missing?
}

input {
  display: none;
}

:checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

.icon-color, .icon-background {
  color: $color-accent-light;
}

.front.icon-color {
  z-index:100;
}

.card .front, .card .back {
  padding:1.5em;
}

.card .front {
  background: $color-darkest;  
}

.title{
  text-align:center;
  color: $color-lightest;
}
<label>
  <input type = "checkbox"/>
  <div class = "card">
    <div class = "front">
      <span class = "fa-stack fa-5x">
        <i class = "far fa-circle fa-stack-2x icon-background"></i>
        <i class = "fa fa-user fa-1x icon-color" aria-hidden = "true"></i>
      </span>
      <h2 class = "title">My Information</h2>
    </div>
    <div class = "back">
      <h3>Header</h3>
      <h5>Subheader</h5>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
    </div>
  </div>
</label>

Я считаю, что проблема заключается в жестко заданной высоте, но ТАКЖЕ и в абсолютном позиционировании. Просто комментирую те подсказки.

label {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  width: 100%;
/* 	height: 250px; */
  cursor: pointer;
}

.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}

.card div, .card span {
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;	
}

.card div {
 /*  position: absolute; */
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card .back {
  background: $color-lightest;
  color: $color-darkest;
  border: 1px solid $color-darkest;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

input {
  display: none;
}

:checked + .card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

.icon-color, .icon-background {
  color: $color-accent-light;
}

.front.icon-color {
  z-index:100;
}

.card .front, .card .back {
  padding:1.5em;
}

.card .front {
  background: $color-darkest;  
}

.title{
  text-align:center;
  color: $color-lightest;
}
<label>
  <input type = "checkbox"/>
  <div class = "card">
    <div class = "front">
      <span class = "fa-stack fa-5x">
        <i class = "far fa-circle fa-stack-2x icon-background"></i>
        <i class = "fa fa-user fa-1x icon-color" aria-hidden = "true"></i>
      </span>
      <h2 class = "title">My Information</h2>
    </div>
    <div class = "back">
      <h3>Header</h3>
      <h5>Subheader</h5>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
      <p>Info</p>
    </div>
  </div>
</label>

Другие вопросы по теме