100% 高度元素边框重叠

Question

我是 HTML/CSS 的新手，所以如果这是一个菜鸟问题，我深表歉意。如果两者的高度都设置为 100%，则以下代码具有与外部元素的边框重叠的内部元素的边框。重叠发生在底部。

html,
body {
  height: 100%;
}

body {
  border: 5px solid red;
}

p {
  text-align: center;
}

.body-content {
  border: 5px solid black;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 50%;
}

.left-navbar {
  float: left;
  width: 5%;
  height: 100%;
  border: 5px solid pink;
  margin-bottom: -5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <nav class="left-navbar">
    <p>test1</p>
    <p>test2</p>
    <p>test3</p>
  </nav>
  <div class="body-content">
    <article>
      <p>Content</p>
    </article>
  </div>
</body>

</html>

我尝试了负边距/负填充，但这些选项都没有任何效果。有没有其他方法可以操纵元素的高度以考虑 5px 边框？最后，为什么负数margin/padding没有任何效果？

提前致谢。

Answer 1

您需要将 left-nav 设为边框。

您可以通过添加 box-sizing: border-box;

来完成此操作

它让浏览器将边界作为宽度和高度的一部分包含在内；

html,
body {
  height: 100%;
}

body {
  border: 5px solid red;
}

p {
  text-align: center;
}

.body-content {
  border: 5px solid black;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 50%;
}

.left-navbar {
  float: left;
  width: 5%;
  height: 100%;
  border: 5px solid pink;
  box-sizing: border-box;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <nav class="left-navbar">
    <p>test1</p>
    <p>test2</p>
    <p>test3</p>
  </nav>
  <div class="body-content">
    <article>
      <p>Content</p>
    </article>
  </div>
</body>

</html>

100% 高度元素边框重叠

100% Height Element Border Overlapping

html

css

border