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边界？最后，为什么负边距/填充没有任何影响？

提前致谢。

Answer 1

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

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

来完成此操作

它允许浏览器将vorders包含为宽度和高度的一部分;

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％高度元素边框重叠

1 个答案: