隱藏的溢出不會填滿整個高度

Question

我的內部div有一個背景圖像，當您將鼠標懸停在其上時，該背景圖像應該會放大，而div的高度和寬度不會改變。 我快要走了，但inner-div仍然不能滿足outer-div的全部高度。 除非將鼠標懸停在其上方，否則背景圖像將填充外部div的整個高度。 這是由於溢出所致：我猜是隱藏的。 有人知道如何解決這個問題嗎？

這是我的HTML和CSS：

 .outer-div { overflow: hidden; } .inner-div { padding: 0px; margin: 0px; height: 100%; } #port1 { height: 100%; width: 100%; background-size: cover; background-position: center; transition: all 0.5s ease; background-image: url(../img/desk.jpg); } .inner-div:hover { transform: scale(1.2); } 

 <div id="work" class="container border-bottom"> <h1>My work</h1> <div class="portfolio outer-div"> <div class="inner-div" id="port1"> <h3>test</h3> <p>Website x</p> </div> </div> <div class="portfolio outer-div"> <div class="inner-div" id="port2"> <h3>test</h3> <p>project y</p> </div> </div> <div class="portfolio outer-div"> <div class="inner-div" id="port3"> <h3>test</h3> <p>Webapplicatie x</p> </div> </div> <div class="portfolio outer-div"> <div class="inner-div" id="port4"> <h3>test</h3> <p>Website y</p> </div> </div> </div> 

Answer 1

您正在目睹CSS邊距崩潰的情況，這是一種預期行為。

也就是說你的上邊距.inner-div > h3成為您的上邊距.inner-div和你的下邊距.inner-div > p成為你的下邊距.inner-div一次。

顯然，您沒有想到這一點，但是幸運的是，保證金崩潰需要遵守一系列條件。

一個做保證利潤率不塌陷的方法是指定一個overflow比其他visible子元素（上.inner-div ，在父子緣塌陷行為參與你的情況）：

.inner-div {
    overflow: auto; /* Or 'hidden', depending on your preferences. */
}

Answer 2

您在找這個嗎？

 .outer-div { overflow: hidden; } .inner-div { padding: 0px; margin: 0px; height: 100%; } #port1 { height: 100%; width: 100%; background-size: 100%; background-position: center; transition: background-size 0.5s ease; background-image: url(https://dummyimage.com/600x400/ccc/fff&text=image); } #port1.inner-div:hover { /*transform: scale(1.2);*/ background-size: 120%; } 

 <div id="work" class="container border-bottom"> <h1>My work</h1> <div class="portfolio outer-div"> <div class="inner-div" id="port1"> <h3>test</h3> <p>Website x</p> </div> </div> <div class="portfolio outer-div"> <div class="inner-div" id="port2"> <h3>test</h3> <p>project y</p> </div> </div> <div class="portfolio outer-div"> <div class="inner-div" id="port3"> <h3>test</h3> <p>Webapplicatie x</p> </div> </div> <div class="portfolio outer-div"> <div class="inner-div" id="port4"> <h3>test</h3> <p>Website y</p> </div> </div> </div>