为什么这个元素没有覆盖身体的整个高度？

问题描述 投票：0回答：1

我正在创建页面的一个部分，我必须在其中获取电影详细信息并作为用户类型填写这些卡，但我遇到了一个问题，该部分没有覆盖可用的整个高度空间。

任何有关如何解决此问题的帮助将不胜感激。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="blac-cont">
        <div class="inpt"><input type="text" id="tx" placeholder="Enter Keyword to search">
        <span class="cls-overly" id="clovr"><i class="fa-regular fa-circle-xmark"></i></span>
        </div>

        <div class="crdmn">
            <div class="crds">
                <div class="hvractv">
                  <span class="txtp">
                    Movie
                  </span>
                  <span class="txdtl">
                    <span class="txmn flwr">
                      All Quiet Among the Western Front
                    </span>
                    <span class="txsesn">
                      <i class="fas fa-circle"></i>
                      2005
                    </span>
                    <span class="txdur">
                      <i class="fas fa-circle"></i>
                      225min
                    </span>
                  </span>
                  <span class="icna">
                    <a href="https://google.com">
                      <i class="fas fa-play"></i>
                    </a>
                  </span>
                </div>
              </div>

          <div class="crds">
            <div class="hvractv">
              <span class="txtp">
                Movie
              </span>
              <span class="txdtl">
                <span class="txmn flwr">
                  All Quiet Among the Western Front
                </span>
                <span class="txsesn">
                  <i class="fas fa-circle"></i>
                  2005
                </span>
                <span class="txdur">
                  <i class="fas fa-circle"></i>
                  225min
                </span>
              </span>
              <span class="icna">
                <a href="https://google.com">
                  <i class="fas fa-play"></i>
                </a>
              </span>
            </div>
          </div>

          <div class="crds">
            <div class="hvractv">
              <span class="txtp">
                Movie
              </span>
              <span class="txdtl">
                <span class="txmn flwr">
                  All Quiet Among the Western Front
                </span>
                <span class="txsesn">
                  <i class="fas fa-circle"></i>
                  2005
                </span>
                <span class="txdur">
                  <i class="fas fa-circle"></i>
                  225min
                </span>
              </span>
              <span class="icna">
                <a href="https://google.com">
                  <i class="fas fa-play"></i>
                </a>
              </span>
            </div>
          </div>

          <div class="crds">
            <div class="hvractv">
              <span class="txtp">
                Movie
              </span>
              <span class="txdtl">
                <span class="txmn flwr">
                  All Quiet Among the Western Front
                </span>
                <span class="txsesn">
                  <i class="fas fa-circle"></i>
                  2005
                </span>
                <span class="txdur">
                  <i class="fas fa-circle"></i>
                  225min
                </span>
              </span>
              <span class="icna">
                <a href="https://google.com">
                  <i class="fas fa-play"></i>
                </a>
              </span>
            </div>
          </div>
    </div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background-color: #3fa885;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}


.blac-cont {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: black;
  width: 100%;
  height: 100%;
  padding: 18px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.inpt {
  display: flex;
  margin: 12px 13px auto;
  gap: 12px;
  width: 95%;
  height: 11%;
}

#tx {
  display: flex;
  flex-grow: 0.97;
  border: none;
  outline: none;
  caret-color: white;
  font-size: 18px;
  color: white;
  border-bottom: 2px solid #c1c1c1;
  background-color: transparent;
  padding: 10px;
}

.cls-overly{
  display: flex;
  background: #fff;
  padding: 10px;
  border-radius: 49%;
  font-size: 1.6rem;
  height: max-content;
  cursor: pointer;
}

.crdmn {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  width: 89%;
  height: 98%;
  gap: 10px;
}

.crds {
  overflow: hidden;
  position: relative;
  margin: 10px auto;
  cursor: pointer;
  background: url("https://image.tmdb.org/t/p/w300//2IRjbi9cADuDMKmHdLK7LaqQDKA.jpg");
  background-size: 101% 100%;
  background-repeat: no-repeat;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.5) 1px 25px 44px,
    rgba(0, 0, 0, 0.29) 1px 19px 16px;
  padding: 10px;
  width: 14.85rem;
  height: 46.15vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
}

.hvractv {
  overflow: hidden;
  background: blue;
  border-radius: 12px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  display: none;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
}

.crds:hover .hvractv {
  animation: bottom 1.3s ease-in forwards;
  display: flex;
}

@keyframes bottom {
  from {
    bottom: -85%;
    opacity: 0;
  }
  to {
    bottom: 0%;
    opacity: 1;
    
  }
}

.txtp {
  padding: 6px;
  border: 2px solid #050;
  width: max-content;
  border-radius: 10px;
  margin: 3px auto;
  font-size: 16px;
  background-color: black;
  color: white;
}

.txdtl {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 7px;
  width: 96%;
  margin: 1px auto;
  background: rgba(92, 168, 126, 0.23);
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8.2px);
  -webkit-backdrop-filter: blur(8.2px);
  border: 1px solid rgba(92, 168, 126, 0.33);
  justify-content: space-between;
}
.txmn {
  margin: 2px auto;
  overflow-wrap: break-word;
  text-align: center;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
}
.txmn:hover {
  transform: scale(1.01) translateY(-0.5px);
}

.txsesn {
  font-size: 16px;
  margin: 5px auto;
  font-weight: bold;
  text-align: center;
}

.txsesn:hover {
  transform: scale(1.1) translateY(-1px);
}

.txdur {
  font-size: 16px;
  margin: 6px auto;
  text-align: center;
  font-weight: bold;
}

.txdur:hover {
  transform: scale(1.1) translateY(-1px);
}

.icna {
  margin: 47px auto;
  border-radius: 50%;
  background-color: #ffe300;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 44px;
  height: 44px;
  box-shadow: rgba(0, 0, 0, 0.5) 1px 25px 44px,
    rgba(0, 0, 0, 0.29) 1px 19px 16px;
}

.icna:hover {
  transform: scale(1.1) translateY(-1px);
}

.flwr {
  display: flex;
  flex-wrap: wrap;
}

.fa-circle {
  text-align: center;
  font-size: 6.2px !important;
  color: black !important;
}

如您所见，卡片无法与 div 中的其余可用空间无缝集成。我尝试过调整各种 CSS 属性，但无法确定确切的问题。

javascript html css layout responsive-design
1个回答
0
投票
  • 在 CSS 文件中，您正在为卡片设置固定高度
.crds {
height: 46.15vh;
}

在这里，您正在为卡片设置固定高度。 使用像 

fixed height
这样的 
46.15vh;
可能会创建非响应式布局，并在不同的屏幕尺寸上在底部留下空白空间。

  • 您可以使用 
    flex-grow
    属性。
.crds {
  /* styles */
  flex-grow: 1;
}

这意味着每张卡片将占据弹性容器内任何可用的垂直空间。
希望这有帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.