Question

为什么类box的div不是100％高度？

   <!DOCTYPE html>
<html>

<head>
  <style>
*, html {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  min-height: 100%;
}

.box {
  min-height: 100%;
  background-color: brown;
}

  </style>
</head>

<body>
<div class="box">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
</div>
</body>

</html>

更新

<!DOCTYPE html>
<html>

<head>
  <style>

html, body {
  padding: 0;
  margin: 0;
  min-height: 100%;
}


  </style>
</head>

<body>
<div class="box">
    <p>This is a paragraph.</p>
</div>
</body>

</html>

为什么身体不是100％？我设置min-height: 100%;！

Answer 1

这就是你要找的东西：

您需要为body和html添加100％的高度。你的错误是将* 100％添加到*，这适用于每个元素（包括你的段落）

* {
  padding: 0;
  margin: 0;
}
html {
  height: 100%;
}

body {
  height: 100%;
}

.box {
  height: 100%;
  background-color: brown;
}

<!DOCTYPE html>
<html>

<head>
  <style>


  </style>
</head>

<body>
<div class="box">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
</div>
</body>

</html>

Answer 2

我总是遇到height: 100%的问题。

尝试将您的身体设置为屏幕100：

body {
    height: 100vh;
}

问候！

Answer 3

因为你的身体不是100％：使用以下：

<!DOCTYPE html>
<html>

<head>
  <style>
    *, html {
      padding: 0;
      margin: 0;
      min-height: 100%;
    }

    body {
      min-height: 100%;
    }

    .box {
      min-height: 100%;
      background-color: brown;
    }

  </style>
</head>

<body class="box"> //will make body same as div

    <div class="box">
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div>
</body>

</html>

箱子为什么不是100％高度？

3 个答案: