时间戳

首页 > 解决方案 > 为什么使用百分比时标题的高度没有增长？

html - 为什么使用百分比时标题的高度没有增长？

问题描述

我正在尝试使标题占据主体的 20% 到 40%，但是当我尝试使用百分比时，它不起作用，但它的像素起作用。我想知道为什么它不能使用百分比？

*{
  margin:0;
  padding:;
  box-sizing:border-box;
}
html{
  padding:3em;
}

header{
  width:100%;
  background:#e74c3c;
  height:30%;

}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <header>
    <h1> Javascript </h1>
  </header>
  <nav>
    <ul>
      <li>Home</li>
    <li>contact </li>
    <li>gallery</li>
    <li>about us</li>
   </ul>
  </nav>
  <div class="content">
    <h1>learn javascript</h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo laboriosam, explicabo commodi tempora maiores facere qui <BR></BR>ratione nostrum unde rem placeat, distinctio similique quod quos ullam autem molestiae? Perferendis vero hic temporibus quaerat, aut tempore ipsam expedita fuga ea cupiditate eius sit <BR></BR> unde, dolorem earum enim quos, omnis voluptates deserunt commodi rem veritatis? Quam at ipsum excepturi deserunt quae! Debitis ab fugit error dolore! Maiores sunt hic suscipit? Nihil, quis.
  </div>
  <aside>
    <ul>
      <li>home </li>
      <li>contact</li>
      <li>galley</li>
      <li>about</li>
    </ul>
  </aside>
  <footer>
      <p class=end-text>shayan kanwal@copyright 2020</p>
  </footer>
</body>
</html>

标签： htmlcss

解决方案

编辑：所以正如 MaxiGui 提到的，给你的 html 或 body 一个固定的高度不是一个好主意。示例已被编辑为使用高度单位，这在这种情况下更有意义。

回答您的问题：在 CSS 的当前版本中，当您在高度参数上使用它时，% 值无法正常工作。它仅在父元素具有固定高度时才有效。所以它可以在其他元素中使用，不要用 body 或 html 这样做，因为它会在某些时候明确地破坏你的布局。例如，块元素的高度是指其内容的高度。您可以查看这篇文章以进一步解释原因和方式。

*{
  margin:0;
  padding:;
  box-sizing:border-box;
}
html{
  padding:3em;
}

header{
  width:100%;
  background:#e74c3c;
  /*vh is a unit that uses the current height that is available on the viewport, it basically is:
relative to 1% of the height of the viewport, so 30vh = 30% of the viewports available height*/
  height:30vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <header>
    <h1> Javascript </h1>
  </header>
  <nav>
    <ul>
      <li>Home</li>
    <li>contact </li>
    <li>gallery</li>
    <li>about us</li>
   </ul>
  </nav>
  <div class="content">
    <h1>learn javascript</h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo laboriosam, explicabo commodi tempora maiores facere qui <BR></BR>ratione nostrum unde rem placeat, distinctio similique quod quos ullam autem molestiae? Perferendis vero hic temporibus quaerat, aut tempore ipsam expedita fuga ea cupiditate eius sit <BR></BR> unde, dolorem earum enim quos, omnis voluptates deserunt commodi rem veritatis? Quam at ipsum excepturi deserunt quae! Debitis ab fugit error dolore! Maiores sunt hic suscipit? Nihil, quis.
  </div>
  <aside>
    <ul>
      <li>home </li>
      <li>contact</li>
      <li>galley</li>
      <li>about</li>
    </ul>
  </aside>
  <footer>
      <p class=end-text>shayan kanwal@copyright 2020</p>
  </footer>
</body>
</html>

推荐阅读