如何使盒子適合其父母的身高？

有沒有什麼辦法在純CSS來使一個正方形div適合它的父母的高度？例如，如果父div的寬度爲1000像素，但高度爲300像素，則此子div將自動變爲300像素×300像素。如何使盒子適合其父母的身高？

我發現自動從父寬度調整它們的高度和寬度使用paddingtop的div的多個例子，但沒有高度基於

inherit屬性用於此目的。但是，inherit關鍵字指定一個屬性應該從其父元素繼承它的值。因此，對於純粹的CSS，你不能這樣做。例如，

span { 
    color: blue; 
} 

.extra span { 
    color: inherit; 
}

您不能說對孩子如下：

.extra span { 
    background-color: inherit; 
}

由於不存在background-color屬性父DIV沒有初始值。

2016-10-30 12:21:25

這將使高度等於父級，但不會影響我想要匹配高度的寬度 – user2330270

是的，它直接複製父div的屬性值（如果存在）。 –

@ user2330270我發現了一個與您的問題類似的問題。請看看：http://stackoverflow.com/questions/26320858/set-childs-width-to-the-height-of-the-parent-in-pure-css –

只要給它height: 100% - 這指的是父元素的高度。默認的寬度是auto，所以它會保持正確的比例。

2016-10-30 12:22:29 Johannes

您可以嘗試不同的方法，並將外部父母的身高尺寸設置爲其孩子的身高。

.parent { 
    width:100%; 
    overflow:auto; 
} 

.child{ 
    height:20vw; 
    width:20vw; 
}

這樣，你可以調整大小，你想孩子，說在這種情況下，用高度和寬度20vw和家長的高度方會再展開以匹配其子。

2016-10-30 12:53:27 Todd

是不是基於vh/vw窗口的高度/寬度，而不是父母的div？ – user2330270

是的，你是正確的，vh/vw是基於窗口。我選擇了這個單元，因爲它可以在不同屏幕尺寸（如移動設備）上保持方形div方面相同。你可以使用px，但那麼內部的子div將是一個固定的大小，因此不太敏感。 – Todd

所以基本上這個解決方案是根據孩子的大小來確定父母的大小，而不是讓孩子適合其父母的身高。這個孩子是20vw乘20vw的方格，父母的寬度是100％，長方形是20vw。這有助於解決問題嗎？ – Todd

回答