html - css body border，绝对定位干扰

Question

我不明白为什么 body 周围的边框没有呈现。我相信它与具有绝对定位的子 div #pages 有关，因为当我删除 #pages 时，边框会重新出现。我该如何解决这个问题？

html {
  width: 100%;
}
    
body {
  background-color: green;
  background-size: 10%;
  width: 100%;
  margin: 0;
  border-style: solid;
}
    
#pages {
  width: 90%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div id="pages">
  <a href="">REPORT FRAUD</a><br>
  <a href="">TRACK</a>
</div>

Answer 1

边框不会消失。它就在那里，但你在正文中没有内容，所以它没有什么可以“包裹”在边界内。所以它看起来只是一个“border-top”，但实际上是一个 4 边边框，边框内没有任何空间 :)

我说 body 没有内容，因为它里面唯一的元素有 postion:absolute 所以 #page 不占用任何内容。

有几种方法可以解决这个问题。您可以向主体添加 100vh(100% 视口(viewport)高度)的高度。你不会有任何问题。

    
body {
  background-color: green;
  width: 100%;
  margin: 0;
  border-style: solid;
  box-sizing:border-box;
  height:100vh;
}

#pages {
  width: 100%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div id="pages">
  <a href="">REPORT FRAUD</a><br>
  <a href="">TRACK</a>
</div>