HTML parents - 不确定如何正确使用 CSS 百分比

Question

我无法理解如何在 CSS 中正确使用百分比高度属性。 在过去根据页面大小调整元素大小时，它对我来说是一个有用的工具。

但是，在使用百分比指定 divs 中的 divs 属性时，我遇到了一个问题。

例如，

<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;
}

下面是“inner”的相关CSS

#signinGreetText
{
   margin-top:5%;
}

signinGreetText 的 margin-top 属性仍然占整个页面的 5%，而不是 login_center_panel 高度的 5%

Answer 1

% 基于包含元素的宽度。您需要为 .outer div 指定 width 或 max-width 属性，或者为上边距使用不同的测量值。 要查看 % 如何基于宽度，请在查看当前代码时更改页面的宽度。上边距应随页面宽度变化。