如何为元素设置正确的高度？ [复制]答案

【问题标题】：How can I set right height for the elements? [duplicate]如何为元素设置正确的高度？ [复制]
【发布时间】：2019-04-07 00:33:00
【问题描述】：

我为html 和body 设置了height = 100%，但我看到了垂直滚动。如果没有滚动条，我如何适应我的body？

另外，我将height = 50% 的两个div 元素放入body，但我看到底部边框超出了body 的区域。为什么会发生，我该如何解决？

html, body {
      height: 100%;
    }

    body {
      border-color: #00cc00;
      border-width: thin;
      border-style: solid;
      min-height: 100%;
    }

    .div1 {
      border-color: #0099ff;
      border-width: thin;
      border-style: solid;
      height: 50%;
      width: 50%;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1"></div>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

边框大小是问题所在。我从div1 中删除了边框并添加了background-color。你不会看到 div 出去。此外，如果您从正文中删除边框样式并添加margin:0; 和padding:0;，那么您将看不到滚动条。（我保留边界以查看第一个问题的修复）

请看下面的片段：

html, body {
      height: 100%;
      margin:0;
      padding:0;
    }

    body {
      border-color: #00cc00;
      border-width: thin;
      border-style: solid;
      min-height: 100%;
    }

    .div1 {
      background-color:red;
      height: 50%;
      width: 50%;
    }
    
    .div2{
    background-color: pink;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1 div2"></div>
</body>
</html>

盒子大小

如果您需要边框，那么您可以使用box-sizing:border-box 样式作为 div。

请参阅下面的片段：（从正文中删除 margin-bottom:10px;，这样您就不会看到滚动条）

html, body {
      height: 100%;
      margin:0;
      padding:0;
    }

    body {
      border-color: #00cc00;
      border-width: thin;
      border-style: solid;
      min-height: 100%;
      box-sizing: border-box;
      margin-bottom:10px;
    }

    .div1 {
      border-color: #0099ff;
      border-width: thin;
      border-style: solid;
      height: 50%;
      width: 50%;
      box-sizing: border-box;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1"></div>
</body>
</html>

【讨论】：

【解决方案2】：

由于 body 元素的默认边距而出现侧滚动。为避免这种情况，您需要为正文设置margin: 0;。也可能由于box-sizing 属性而发生。只需设置 box-sizing: border-box; 即可使 div 大小为 50%，包括边框厚度

html, body {
      height: 100%;
      box-sizing: border-box;
    }

    body {
      border-color: #00cc00;
      margin: 0;
      border-width: thin;
      border-style: solid;
      min-height: 100%;
    }

    .div1 {
      box-sizing: border-box;
      border-color: #0099ff;
      border-width: thin;
      border-style: solid;
      height: 50%;
      width: 50%;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1"></div>
</body>
</html>

【讨论】：

【解决方案3】：

   HTML { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; 
   
        border-color: #00cc00;

     
    }

    .div1 {
      border-color: #0099ff;
      border-width: thin;
      border-style: solid;
      height: 50%;
      width: 50%;
    }

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8"/>
  <title>Sandbox</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div1"></div>
</body>
</html>

【讨论】：

或者你可以改变代码 "HTML { height:100vh; } body {height: 100vh; min-height: 100vh; position:absolute; top:0; bottom:0; right:0;左：0；}"

【解决方案4】：

问题是由您在不同元素上包含的边框的像素宽度引起的。通过使用 box-sizing 属性，您可以告诉浏览器在进行百分比计算时需要考虑元素的边框宽度，例如高度和宽度。

您还可以使用overflow-y: hidden; 隐藏垂直滚动条。

这是实现此目的所需的最少代码：

<html>
<head>
<title>Sandbox</title>
<style>
html, body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
}
body {
  border: 1px solid #00cc00;
}
.div1 {
  box-sizing: border-box;
  border: 1px solid #0099ff;
  height: 50%;
  width: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>

【讨论】：