Question

我在理解如何正确使用CSS中的百分比高度属性时遇到问题。在调整与页面大小相关的元素时，它对我来说是一个很有用的工具。

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

例如，

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

在上面的代码中，我设置了＆＃34; inner＆＃34;的文本。具有5％的上边距的类，它成功地将文本从＆＃34;外部＆＃34;的顶部边缘向下推。类。

然而，有人告诉我，5％将是相对于元素的父元素，我认为这将是＆＃34;外部＆＃34; （因为它在外部div标签内）。它实际上占页面高度的5％，这使其比预期更进一步。

我可能错过了一些HTML / CSS的怪癖，因为我还是比较新的，所以任何帮助都会受到赞赏。

提前致谢：）

编辑：我现在明白问题在于某些没有静态尺寸的父元素，但有没有办法避免这种情况，但仍然有子元素的相对高度/宽度？用静态高度/宽度定义主体似乎很愚蠢，这会严重限制网站在具有其他尺寸的设备上的可访问性。

＆＃34;外部＆＃34;的相关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;
}

及以下是＆＃34; inner＆＃34;

的相关css

#signinGreetText
{
   margin-top:5%;
}

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

Answer 1

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

Answer 2

你有一个高度设置为＆＃39;外部＆＃39;？如果没有，这就是为什么保证金比你预期的要大。如果您为外部设置了一个高度＆＃39;您会注意到保证金会相应地缩放。

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

2 个答案: