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百分比

回答

相关问题