The div's height is not matching the CSS declaration as expected

Question

The div's height is not matching the CSS declaration as expected

In my HTML, I have a div called innerDetails which serves as a flex item with the following CSS properties:

.cover {
                    height: 100vh;
                    width: 100%;
                }

                #screenContainer {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                /* Other CSS styles omitted for brevity */

I am facing an issue where the height of the div reduces automatically from the specified 100% to 0%. Adding padding did not resolve this issue. However, when I add text inside the div, only that portion displays the background image.

https://i.sstatic.net/3Z6tp.png

html css

Answer 1

Answer №1

Simply delete the height: 100% from the .innerDetails class

.cover {
  height: 100vh;
  width: 100%;
}

#screenContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#screen {
  height: 90vh;
  width: 87vw;
  background-color: #eeeeee;
  border-radius: 2%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#innerScreen {
  background-color: #060b22;
  height: 80vh;
  width: 80vw;
  padding: 15px;
}

#details {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap-reverse;
}

.innerDetails {
  /* height: 100%; */
  width: 45%;
  font-size: 1.7vw;
  color: rgb(255, 117, 67);
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
}

#backImage {
  background-image: url(https://placehold.it/250px250);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="cover" id="screenContainer">
  <div id="screen">
    <div id="innerScreen">
      <p class="heading" id="arr"></p>
      <div id="details">
        <div class="innerDetails">
          <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus
            odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate
            non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
        </div>
        <div id="backImage" class="innerDetails">fdbd</div>
      </div>
    </div>
  </div>
</div>

The current setup is functioning fine, but the #details section lacks specified height. To address this, include height: 100% to the #details segment and observe the changes.

.cover {
  height: 100vh;
  width: 100%;
}

#screenContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#screen {
  height: 90vh;
  width: 87vw;
  background-color: #eeeeee;
  border-radius: 2%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#innerScreen {
  background-color: #060b22;
  height: 80vh;
  width: 80vw;
  padding: 15px;
}

#details {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap-reverse;
  height: 100%; /* or 300px etc */
}

.innerDetails {
  height: 100%;
  width: 45%;
  font-size: 1.7vw;
  color: rgb(255, 117, 67);
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
}

#backImage {
  background-image: url(https://placehold.it/250px250);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="cover" id="screenContainer">
  <div id="screen">
    <div id="innerScreen">
      <p class="heading" id="arr"></p>
      <div id="details">
        <div class="innerDetails">
          <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus
            odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate
            non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
        </div>
        <div id="backImage" class="innerDetails">fdbd</div>
      </div>
    </div>
  </div>
</div>

Answer 2

Simply delete the height: 100% from the .innerDetails class

.cover {
  height: 100vh;
  width: 100%;
}

#screenContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#screen {
  height: 90vh;
  width: 87vw;
  background-color: #eeeeee;
  border-radius: 2%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#innerScreen {
  background-color: #060b22;
  height: 80vh;
  width: 80vw;
  padding: 15px;
}

#details {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap-reverse;
}

.innerDetails {
  /* height: 100%; */
  width: 45%;
  font-size: 1.7vw;
  color: rgb(255, 117, 67);
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
}

#backImage {
  background-image: url(https://placehold.it/250px250);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="cover" id="screenContainer">
  <div id="screen">
    <div id="innerScreen">
      <p class="heading" id="arr"></p>
      <div id="details">
        <div class="innerDetails">
          <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus
            odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate
            non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
        </div>
        <div id="backImage" class="innerDetails">fdbd</div>
      </div>
    </div>
  </div>
</div>

The current setup is functioning fine, but the #details section lacks specified height. To address this, include height: 100% to the #details segment and observe the changes.

.cover {
  height: 100vh;
  width: 100%;
}

#screenContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#screen {
  height: 90vh;
  width: 87vw;
  background-color: #eeeeee;
  border-radius: 2%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#innerScreen {
  background-color: #060b22;
  height: 80vh;
  width: 80vw;
  padding: 15px;
}

#details {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap-reverse;
  height: 100%; /* or 300px etc */
}

.innerDetails {
  height: 100%;
  width: 45%;
  font-size: 1.7vw;
  color: rgb(255, 117, 67);
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
}

#backImage {
  background-image: url(https://placehold.it/250px250);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="cover" id="screenContainer">
  <div id="screen">
    <div id="innerScreen">
      <p class="heading" id="arr"></p>
      <div id="details">
        <div class="innerDetails">
          <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus
            odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate
            non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
        </div>
        <div id="backImage" class="innerDetails">fdbd</div>
      </div>
    </div>
  </div>
</div>

The div's height is not matching the CSS declaration as expected

Answer №1

Similar questions

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

Enhance container and typography for layouts converted to 1920px width to improve overall design

Using jQuery to smoothly scroll horizontally to a specific div element

jquery hover effect not functioning properly

Display column header row divider for pinned columns in v5 DataGrid

Unexpected behavior from Internet Explorer - Span contents remain unchanged despite valid input

What is the best way to get my loading screen div to cover the entirety of my screen, including all content beneath it?

Arranging items in a flex container

How can I add color to arrow icons in tabulator group rows?

What is the best method for aligning forms vertically within a page layout?

There are times when JQuery scripts fail to function correctly

Is there a way for me to insert a variable into the src attribute of my img tag like this: `<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>`

Attempting to create a child process within the renderer by triggering it with a button click

Tips for implementing and utilizing onclick functions in EJS

In what rare scenarios does JS in string concatenation within insertAdjacentHTML fail to evaluate?

audio enhancement in a web-based game

Utilizing the modulo operation for organizing rows and columns

Implement a vertical scrolling animation in datatables

Display a button within a table depending on the content of adjacent cells

Tips for avoiding duplicates when searching with the simple HTML DOM parser