Q

我們可以在css中使用百分比高度嗎？

2012-05-11 127 views 1 likes

1

我使用與懸停效果5張橫幅圖片，並使用下面的代碼我們可以在css中使用百分比高度嗎？

#banner 
{ 
    float:left; 
    width:99.025%; 
    padding:0 0 0 10px; 
    margin:0; 
    height: 16.714em; /* 234px*/ 
    position:relative; 
    overflow:hidden; 
    display:block; 
    background:url('/pages/images/bottom_wood_repeater.jpg') 0 104px repeat-x; 
} 

#banner img 
{ 
    float:left; 
    width:19.435%; /*197px;*/ 
} 

#banner a img 
{ 
    float:left; 
    display:block; 
} 

#banner a:hover img 
{ 
    float:left; 
    position:relative; 
    top:-16.714em; /* 234px*/ 
}

我可以使用高度百分比，而不是他們嗎？

height: 16.714em; /* 234px*/

其實我正在創建響應式設計，它正在爲較小的分辨率或移動設備創建問題。

現在所在的位置：http://new.brandonplanning.com/home

感謝提前:)

2012-05-11 Sushil Raghav

A

回答

5

是，也不是。

具體來說，你可以而不是這樣做，如果父元素沒有固定的高度。想一想：如果一個元素的高度等於其父母身高的百分比，那麼父母的身高需要首先計算。但要計算父母的身高，首先需要計算孩子的身高。但在計算這個孩子的身高之前，你需要計算父母的身高。你看看這是怎麼回事。

如果父確實有一定的高度，然後對兒童比例高的罰款。

如果父母確實是而不是有固定高度，並且您爲孩子設置了一個百分比高度，那麼瀏覽器將簡單地放棄並將孩子視爲height: auto。

2012-05-11 08:35:24 Jon

+0

感謝快速回復將嘗試父高度添加爲固定高度和嘗試。非常感謝:) –

+0

嘿喬恩可以請你通過我的網站，並建議我要躲在某物體低於上懸停狀態顯示藍色的旗幟。或者我有另一種選擇，我會嘗試在前面使用主圖像或懸停時使用每個橫幅，並嘗試提供背景圖像？你建議什麼是最好的方法來做到這一點？再次thaks :) –

1

我可以使用高度百分比，而不是他們嗎？

當然可以。與height:25%;但可能不會達到你想要什麼，如果其他屬性在被分解

高度可

汽車 - 瀏覽器計算的高度。這是默認

長度 - 以像素，釐米等定義高度

％ - 定義高度在包含塊的百分比

如果您仍然有佈局的問題，你可以檢測客戶端是否處於移動狀態並向他們呈現不同的CSS。

2012-05-11 08:36:52

+1

這是誤導。你可以*寫*，但它不會工作，除非父母的身高是固定的。 – Jon

+0

基於這個問題，這不是誤導。我同意你的回答。 –

+0

閱讀我的答案或自己嘗試。這不是火箭科學。 – Jon

0

我不明白爲什麼不能。從技術上講，這沒關係。你嘗試使用％嗎？

2012-05-11 08:37:23 Chin

+0

是的，我嘗試使用％，嘗試減少瀏覽器的大小，它會自動減少一切，並使其適合屏幕，但我面臨的問題與橫幅圖像，因爲你減少瀏覽器的大小，然後圖像將相應減少，因爲我已經給出了它們的寬度以百分比表示，但高度表示em，因此也可以看到下面的一半圖像。謝謝:) –

+1

你能提供bug的圖片嗎？ –

+0

你能告訴我們如何添加圖片嗎？ –

0

簡單地說是的，我們在CSS中使用高度百分比。

2012-06-09 17:03:59

1

確保您添加的「％」標誌，以你的CSS，你可以隨時使用％。

2012-06-09 17:05:35

相關問題