html - div的高度不符合css中的声明

Question

我有一个 div innerDetails，它是一个弹性项目，其代码如下所示：

.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>

（嗯，有很多代码，但没有它我会瘦，重现我的问题是不可能的。有些值在 vh 和 vw 中，所以扩展结果。）

问题是 div 的高度会自动从我指定的高度 (100%) 减小到 0%。

我认为是这样，因为 div 内没有内容，只有背景图像。所以我添加了一些填充，但它没有用。

但是，如果我在 div 中插入一些文本，则只有那么多部分具有背景图像。

标签： htmlcss

Answer 1

只需height: 100%从.innerDetails

.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>

它有效，但#details实际上没有高度。添加height: 100%并#details查看结果。

.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>