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

边框不会消失。它在那里，但是您体内没有任何内容，因此它没有“包裹”边界内的东西。因此，它看起来仅像“边界顶部”，而实际上是4边边框，边框内部没有任何空间：）

我说主体没有内容，因为其中唯一的元素包含postion:absolute，因此#page不会占据任何内容。

有几种方法可以解决此问题。您可以为主体添加100vh的高度（100％视口高度）。而且您不会有任何问题。

    
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>

Answer 2

尝试将100％添加到html和body标签

{
   "manifest_version": 2,
   "name": "Jisho Dictionary Search",
   "permissions": [ "contextMenus" , "tabs" ],
   "version": "1.2",
   "background": {
      "scripts": [ "background.js", "background2.js" ]
   },
   "description": "Adds a shortcut to do a Jisho search automatically",
   "browser_action": {
      "default_popup" : "browser_action.html"

   },
   "commands": {

     "toggle_feature": {
         "suggested_key": { "default": "Ctrl+X" },
         "description" : "Opens new tab with word search on Jisho"
      },
      "_execute_browser_action": {
         "suggested_key": {
            "default": "Ctrl+Shift+X"
         }
      }

   }

}

Answer 3

html {
  width: 100%;
  height: 100%;
}
    
body {
  height: 100%;
  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>

CSS的身体边界，绝对定位干扰

3 个答案: