div没有高度

Question

我正在做一个简单的画廊。它只是一些减少照片的迷你 div，其中有 8 个。当您单击其中一个时，会出现一个带有静态宽度（484px）和静态高度的大 div，但我希望高度为 AUTO，但是，当我设置它时，不会出现 div，只有一行边框，仅此而已。

<div class="box_1">
    <div class="box_1_header">Header</div>
    <div class="box_1_content">
        <div class="baza_big_photo"></div>
        <div class="br2"></div>
        <div class="baza_zdjecia" id="tn_galeria01" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria02" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria03" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria04" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria05" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria06" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria07" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria08" onclick="changePhoto(this.id)"></div>
    </div>
</div>  

一些传说：我的大 div 应该出现宽度为 484px 和高度自动的照片，但不会出现 - 是 baza_big_photo，带有可点击 imgs 的小 div 是 baza_zdjecia。

CSS：

.baza_big_photo {
   width: 484px;
   height: auto;
   box-sizing: border-box;
   border: 1px solid black;
   display: block;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100% 100%;
   margin: 3px;
   overflow: hidden;
}
.baza_zdjecia {
   width: 118px;
   height: 86px;
   margin: 2px;
   box-sizing: border-box;
   border: 1px solid black;
   overflow: hidden;
   float: left;
}

JS：

      function changePhoto(id) {
        var y = document.getElementById("baza_big_photo");
        y.style.display = "block";
        var z = "url('./assets/galeria_images/" + id + ".jpg')";
            y.style.backgroundImage = z;
            console.log(z);
    }

Answer 1

div 高度为 0 的原因是块元素默认为 0 高度，并且没有指定高度，仅与它们内部的内容一样高。由于您的 div 没有内容，因此高度为 0。

要改为在该 div 中使用 img 标记，这将为其提供与 img 标记匹配的内容和高度，请向该 div 添加一个 img 标记，为该标记提供一个 ID，以便您可以定位用JS轻松搞定，像这样在你的JS中设置src。

 function changePhoto(id) {
     var y = document.getElementById("baza_big_photo_img");
     var z = "/assets/galeria_images/" + id + ".jpg";
     y.src = z;
 }

.baza_big_photo {
   width: 484px;
   height: auto;
   box-sizing: border-box;
   border: 1px solid black;
   display: block;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100% 100%;
   margin: 3px;
   overflow: hidden;
}
.baza_zdjecia {
   width: 118px;
   height: 86px;
   margin: 2px;
   box-sizing: border-box;
   border: 1px solid black;
   overflow: hidden;
   float: left;
}

<div class="box_1">
    <div class="box_1_header">Header</div>
    <div class="box_1_content">
        <div class="baza_big_photo"><img src="" id="baza_big_photo_img"></div>
        <div class="br2"></div>
        <div class="baza_zdjecia" id="tn_galeria01" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria02" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria03" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria04" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria05" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria06" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria07" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria08" onclick="changePhoto(this.id)"></div>
    </div>
</div>

Answer 2

虽然其他人说要使用 img 标签，但我知道一种方法可以在仍然使用背景图像的同时做到这一点：

<div>

    <p class = "hiddentext">Some Text Some Text Some Text Some Text Some Text</p>
    <p class = "hiddentext">Some Text Some Text Some Text Some Text Some Text</p>
    <p class = "hiddentext">Some Text Some Text Some Text Some Text Some Text</p>
    <p class = "hiddentext">Some Text Some Text Some Text Some Text Some Text</p>

</div>

然后将隐藏文本设置为不可见，如下所示：

.hiddentext {
   visibility: hidden;
}

这样，div 将具有一定的高度，同时客观上是空的。也避免使用 img 标签。希望对您有所帮助！