Question

我为height和html设置了body = 100％，但是我看到了垂直滚动。如何在没有滚动条的情况下适合我的body？

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

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%;
    }

Answer 1

边界尺寸造成了问题。我从>>> A = np.zeros((5, 6), dtype=int) >>> B = np.r_[np.arange(2, 10), 3].reshape(3, 3) >>> r, c = 1, 2 >>> A[r:r+B.shape[0], c:c+B.shape[1]] += B >>> A array([[0, 0, 0, 0, 0, 0], [0, 0, 2, 3, 4, 0], [0, 0, 5, 6, 7, 0], [0, 0, 8, 9, 3, 0], [0, 0, 0, 0, 0, 0]])删除了边框，并添加了A。您不会看到div熄灭。另外，如果您从正文中删除边框样式并添加div1和background-color，则不会看到滚动条。（我一直在边境看第一个问题的解决方法）

请参见下面的代码段

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; }样式用于div。

请参见下面的代码段：（从正文中删除<!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

margin-bottom:10px;

Answer 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>

Answer 3

问题是由要包含在不同元素上的边框的像素宽度引起的。通过使用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>

Answer 4

   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>

如何为元素设置合适的高度？

4 个答案: