Html Question posted in
Some basic documentation can be found here.

Html – Why is this Element not covering the Whole Height of the body?

I am creating a section of a page where I have to fetch the Movie Details and fill into these cards as user types but I encountered a problem, Where this section isn’t covering the whole height space available.

Any Help on how to resolve this would be greatly appreciated.


<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;
}

As You can see cards don’t seamlessly integrate with the rest of the space available in the div. I’ve tried adjusting various CSS properties, but I’m unable to pinpoint the exact issue.

Tags:

2

Answers


  1. 0
    • In your CSS file, you are setting a fix height for the cards
    .crds {
height: 46.15vh;
}

    Here, you are setting a fix height for the cards.
    Using a fixed height like 46.15vh; may create a non-responsive layout and leave empty space at the bottom on different screen sizes.

    • Instead you can use flex-grow property.
    .crds {
  /* styles */
  flex-grow: 1;
}

    It means that each card will take up any available vertical space inside the flex container.
    Hope this helps.

    Login or Signup to reply.
  2. 0

    In the .blac-cont class, remove position related styles and also remove the 100% height.

    .blac-cont {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: black;
  width: 100%;
  padding: 18px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search