为什么盒子不是 100% 高度？答案

【问题标题】：Why is the box not 100% height?为什么盒子不是 100% 高度？
【发布时间】：2018-11-11 16:32:08
【问题描述】：

为什么类 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%;！

【问题讨论】：

html, 身体 { 高度: 100%; }
为什么不min-height？
我更新了我的帖子。第二段为什么是白色背景？
HTML, * { 高度：100vh}
由于* 选择器，您的p 也设置为100% 高度

标签： html css

【解决方案1】：

因为你的身体不是 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%？我用min-height: 100%;设置它。
身体 { 最小高度：100%; } 你没有给。或 # 在正文之前。你也可以这样做..它会更精确
这个也请参考 stackoverflow.com/questions/3919456/…>

【解决方案2】：

height: 100% 总是有问题。

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

body {
    height: 100vh;
}

您好！

【讨论】：

【解决方案3】：

这就是你要找的东西：

您需要为 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>

【讨论】：