div高度顯示爲零

-1

我的代碼如下所示。但是，圖像高度顯示爲360x0div高度顯示爲零

.modal-submit { 
    .alert-icon { 
     width: 100%; 
     height: 100%; 
     min-height: 100%; 
     border: none; 
     background: #fff url(https://www.somepage/imagename.png) no-repeat center center; 
     background-size: 100px 100px; 
    } 
}

請問您能幫我解決這個問題嗎？

來源

2016-10-29 Sourav

.alert-icon設置爲.modal-submit的高度。如果在模式提交中沒有設置任何高度，則.alert-icon也不會有高度。

.modal-submit { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.alert-icon { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    border: none; 
 
    background: pink; 
 
}

<div class="modal-submit"> 
 
    <h1>content content content</h1> 
 
    <div class="alert-icon"> 
 
    </div> 
 
</div>

來源

2016-10-29 13:09:18 Jleibham

我已經添加了'width：100％; height：100％; padding：0;'到'.modal-submit'但它不起作用。 – Sourav

是的..它的工作。謝謝@Jleibham – Sourav

每當你使用高度作爲百分比時，它的大小是基於它的父div，所以如果你設置.modal-submit爲100％，它本身也在搜索其父div並使用該高度。因此，如果.modal-submits父div沒有設置高度，那麼它將返回0，它也會返回0到alert圖標。 – Jleibham

嘗試增加顯示：塊以提醒圖標被浮動不影響它的容器的高度

來源

2016-10-29 13:10:34 MirzaP

內容。元素不包含沒有浮動的內容（因此沒有任何東西阻止容器的高度爲0，就像它是空的一樣）。

在容器上設置overflow: hidden將通過建立一個新的塊格式上下文來避免這種情況。請參閱爲其他技巧包含浮動塊幷包含浮動塊的方法，以獲得關於爲何以這種方式設計CSS的說明。

來源

2016-10-29 13:16:31

div高度顯示爲零

回答

相關問題