代码之家  ›  专栏  ›  技术社区  ›  Dave

CSS-动态高度

  •  0
  • Dave  · 技术社区  · 6 年前

    我试图建立一个动态高度取决于里面的元素点击翻转卡。现在,我有一个高度显式设置为250px,但理想情况下,我希望大小是动态的。这可能吗?

    我试过把身高设为100%,但显然没用。我也试过做一个flexbox,但似乎也不管用。此外,我还尝试使用最小高度=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>
    3 回复  |  直到 6 年前
        1
  •  0
  •   hcs    6 年前

    对。这是可能的。

    height: auto;

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

    只要你有一个250px的硬编码值,这是不可能的。

        2
  •  0
  •   Stefan    6 年前

    只要让浏览器计算高度就行了。所以不要指定高度。但我也要翻译你的卡片,让它在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>
        3
  •  0
  •   git-e-up    6 年前

    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>