CSS：使用圓角時嵌套的DIV不填充父親

我有兩個div，父圓角，overflow：hidden和內聯背景圖像，以及位置爲absolute的子div，並帶有背景顏色和不透明。CSS：使用圓角時嵌套的DIV不填充父親

在我正常的屏幕尺寸下，孩子DIV幾乎填滿了父DIV，但我可以在角落中製作父DIV的細線。

更大的問題是，當我放大頁面時，在某些屏幕尺寸下，子DIV比父DIV小得多，這顯然看起來很糟糕。

這裏是我的代碼：

.parent-div { 
    height:350px; 
    border-radius:4px; 
    overflow:hidden; 
    background-size:cover; 
    background-position:center center; 
    background-repeat:no-repeat; 
    position:relative; 
} 
.child-div { 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
    padding:15px; 
    text-align:left; 
    background-color:rgba(255,255,255,0.9); 
}

我GOOGLE了這一點，但無法找到一個可行的解決方案。我曾嘗試在子DIV上添加邊框半徑，但這不起作用。

僅供參考 - 當不使用邊界半徑時，一切似乎都很好。

編輯：我想我有種發現問題。我有另一個div圍繞所有這些填充。當我擺脫這一點，它的作品。當我改變填充尺寸時，我可以看到這是導致在上面的圖像中的問題在各種填充尺寸。

編輯2：其實，我發現是什麼導致問題是溢出：隱藏在父div。當刪除這個，只是確保我有孩子div的邊界半徑，一切按預期工作。

來源

2015-10-11 DL1984

試着保持'top：0px; right：0px'以及'.child-div'。 –

http://jsfiddle.net/k0jsquap/如果您添加頂部：0的子div，如Rama Rao M所建議的，如果您的描述是準確的 - 應該沒有問題.... – sinisake

如果你提供了一個工作小提琴更好，但我認爲你的問題是.child-div的測量。試試這個：

.child-div { 
    box-sizing: border-box; /* here */ 
    border-radius: 4px; /* to apply the same that the parent */ 
    height: 100%; /* to make all height */ 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
    padding:15px; 
    text-align:left; 
    background-color:rgba(255,255,255,0.9); 
}

來源

2015-10-11 10:06:54

我剛創建了一個小提琴這個問題在那裏沒有被轉載。我在我的實際代碼中使用bootstrap。想知道如果這是造成問題。還有一點奇怪的是，當我檢查元素的寬度時，它們是相同的，但我可以清楚地看到子DIV在左邊，右邊有大約1px的空間，並且父DIV顯示爲通過。僅供參考我不希望子div與父DIV的高度相同，只是寬度相同。 – DL1984

如果添加我所用的三個屬性不起作用？ –

在小提琴上它完全沒問題，但是在我的實際小提琴的右邊有一個奇怪的1px空間，顯示了父DIV。當我移除邊界半徑時，它工作得很好。 – DL1984

CSS：使用圓角時嵌套的DIV不填充父親

回答

相關問題