HTML父母 - 不確定如何正確使用CSS百分比

我在理解如何正確使用CSS中的百分比高度屬性時遇到問題。對於我來說，在調整頁面大小的元素時，它一直是一個有用的工具。HTML父母 - 不確定如何正確使用CSS百分比

但是，當使用百分比指定div中的div屬性時，我遇到了一個問題。

例如，

<div class="outer"> 
    <div class="inner"> 
    Hello 
    </div> 
</div

在上面的代碼中，我設置「內」類的文本到具有5％，成功地將文本從頂部邊緣向下的頂緣「外」類。

但是，我被告知，5％將相對於元素的父親，我認爲這將是「外部」（因爲它在外部的div標籤內）。它實際上是頁面高度的5％，這比預期的要低得多。

我可能會錯過一些HTML/CSS的怪癖，因爲我還是比較新的，所以任何幫助，將不勝感激。

感謝提前:)

編輯：我現在明白了，問題在於在沒有靜態尺寸一定的父元素，但有沒有辦法避免這一點，但仍然有子元素的相對高度/寬度？用靜態的高度/寬度來定義身體似乎很愚蠢，這會嚴重限制網站在具有其他維度的設備上的可訪問性。

爲「外」相關CSS代碼（記住我只是用外部/內部爲例，以下是我一直在用實際的代碼）

.login_center_panel 
{ 
    width:50%; 
    height:30%; 
    background-color:#3D3D3D; 
    margin-left:auto; 
    margin-right:auto; 
    float:top; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
    font-family: "Verdana", Arial, sans-serrif; 
    color:white; 
    padding:1px; 
}

以下是相關的CSS 「內部」

#signinGreetText 
{ 
    margin-top:5%; 
}

signinGreetText的邊距屬性仍作爲整個頁面的5％，login_center_panel的高度

來源

2014-10-02 Sammdahamm

你能發佈相關的CSS代碼嗎？ – LcSalazar 2014-10-02 14:29:50

5％應該相對於最後一個父元素，它在'px'中定義了一個高度，或者在'％'中定義了一個高度。所以你有'html/body'可能... – loveNoHate 2014-10-02 14:30:18

雖然不是最好避免定義像素的高度/寬度嗎？這不僅僅限制瞭如何在不同維度的設備上查看網站？ – Sammdahamm 2014-10-02 14:39:06

你有一個高度設定的不是5％ '外'？如果沒有，這就是爲什麼保證金比您預期的要大。如果您爲「外側」設置高度，您會注意到邊距將相應地縮放。

來源

2014-10-02 14:33:03

是的，雖然外部的高度也是一個百分比 – Sammdahamm 2014-10-02 14:34:43

什麼是具有特定高度設置的父母（如果有的話）？如果沒有設置高度的父母，這是你的問題的原因。您擁有的身高百分比將繼續上升至下一位家長以確定其身高。如果它沒有在所有元素的末尾找到一個，它將使用100％。 – 2014-10-02 15:05:24

嘗試在div的父級上設置一個固定高度，您需要孩子擁有％高度。 – 2014-10-02 15:05:59

％基於含有元素的寬度。您需要爲.outer div指定width或max-width屬性，或者對頂部邊距使用不同的度量值。要查看％如何根據寬度在查看當前代碼時更改頁面寬度。上邊距應隨頁面寬度而變化。

來源

2014-10-02 14:35:01

寬度，感謝您提醒。％）p – loveNoHate 2014-10-02 14:44:38

HTML父母 - 不確定如何正確使用CSS百分比

回答

相關問題