有沒有辦法顯示寬度爲％，沒有內容的div？

例如顯示這個div：有沒有辦法顯示寬度爲％，沒有內容的div？

<div class="circle"></div 

.circle { 
    width: 300px; 
    height: 300px; 
    background: red; 
    border-radius: 50%; 
}

但是當寬度和高度都在％，該崩潰：

.circle { 
     width: 30%; 
     height: 30%; 
     background: red; 
     border-radius: 50%; 
    }

有沒有辦法得到它顯示？

來源

2013-03-14 gskalinskii

多一點代碼會有幫助。這個'div'裏面有什麼元素？ – Niro 2013-03-14 17:32:00

父容器的尺寸是多少？ – 2013-03-14 17:32:04

這是因爲div沒有高度。 width: 30%;將始終使父母的div寬度爲30％（在本例中爲<body>），這正是您想要的。但是，高度的行爲有點不同。

你需要指定一個100％的高度，身體和HTML像這樣：

html, 
body { 
    height: 100%; 
}

Working Fiddle

您可以瞭解爲什麼height: 100%;行爲就像是here

來源

2013-03-14 17:32:06 Andy

虛假信息 - 寬度30％使* div元素的寬度的30％* - *不*瀏覽器。 – Adrian 2013-03-14 17:33:06

這個解決方案不是一個完美的圓圈：http://jsfiddle.net/EcLzC/ – 2013-03-14 17:33:57

@Adrian在OP的例子中，父母是身體，所以基本上是一樣的東西。雖然編輯。 – Andy 2013-03-14 17:33:57

你需要聲明一個硬寬度/高度在某個地方，在這個例子中，我把硬寬度/高度放在一個容器div上：

http://jsfiddle.net/exrNm/1/

<div class="con"> 
    <div class="circle"></div 
</div> 

.con{ 
    width:300px; 
    height:300px 
} 

.circle { 
    width: 30%; 
    height: 30%; 
    background: red; 
    border-radius: 50%; 
}

您可以很容易地在母鏈上某處設置一個硬度寬度。％需要一個難以計算的值。

來源

2013-03-14 17:34:24 Lowkase

有沒有辦法顯示寬度爲％，沒有內容的div？

回答

相關問題