設置最小高度等於寬度

我有一個流體寬度div在另一個塊級元素內。設置最小高度等於寬度

HTML

<div></div>

CSS

div { 
    width:50%; 
    min-height: /*equal to width */; 
}

我想要的最小高度設定爲等於寬度，使得它是正方形形狀，除非有太多的內容。此時，它應該垂直擴展。這可以通過CSS來實現嗎？

我已經試過：

使用百分比補白或利潤，但這種只設置高度，而不是最大 - 高度和向下推動的內容。

來源

2015-12-03 kthornbloom

您的'div'是否包含在視口中（頂層）還是其他的塊級元素？ –

它位於塊級元素中，該元素具有最大寬度集，以便在視口寬度小於最大寬度時變得更小。 – kthornbloom

由於填充是相對於元件的寬度，則可以使用僞元件通過使用padding-top: 100%;強制分鐘高度：

div { 
 
    float: left; 
 
    margin: 10px; 
 
    width: 25%; 
 
    background: lightGreen; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
    float: left; 
 
}

<div></div> 
 

 
<div> 
 
    div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. 
 
    div with content. div with content. div with content. div with content. div with content. div with content. 
 
</div> 
 

 
<div> 
 
    div with content. div with content. 
 
</div>

來源

2015-12-03 21:24:30 Turnip

哦，很好。我嘗試過，但僞元素在div中添加了額外的空間。我看到添加浮動防止這個問題。我會接受這個，當它讓我！ – kthornbloom

如果任何人在flexbox子項中使用此屬性，則還必須在wrapping元素上設置'display：flex;'，以便高度被flexbox子項繼承。 – user648519

一個選項是使用viewport percentage units。在這種情況下，50vw是視口的50％。如果div是根元素，並且其width與視口相關，則此工作按預期工作。否則，您將不得不計算相對於視口的高度以使其工作。

例如：

div { 
 
    width: 50vw; 
 
    min-height: 50vw; 
 
    background: #000; 
 
}

<div></div>

來源

2015-12-03 21:20:42

對不起，我已經更新了我的問題，以包含此div在塊級元素內的信息，所以它的寬度不一定與視口相同。 – kthornbloom

@kthornbloom可能可以使用calc（）來計算值。 –

設置最小高度等於寬度

回答

相關問題