我无法让 div 占用整个浏览器 window

Question

我正在尝试使 div 的边框与浏览器 window 边缘齐平。

我已经加载了一些 css-重置；清除了页面上的所有内容，除了 [文本] 测试行 - 并且边框似乎从页面边缘消失了 -> 几乎就像 'box-sizing: border-box' 不起作用一样。我已经尝试了 margin: 0 的所有方法来让这个边距消失。我试过 position: fixed 和 position: absolute

Master.css 是唯一加载的样式表，没有内联覆盖。

.. 重置有 html 等等等等摘自 - master.css

html, body, div, span, applet, object, iframe, h1, h2, h3 .......
{
      margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#wholePageDiv {
    margin: 0px;
    padding: 0px;
    border: solid 1px blue;
    padding: 0;
    z-index: 1;
    position: fixed;
    min-height: 99%;
    min-width: 99%;
}

then the html
<div id='wholePageDiv'>
Test text<br>
</div>

蓝色边框与浏览器不齐window。

Answer 1

    margin: 0px auto;
    padding: 0px;
    border: solid 1px blue;
    position: fixed;
    height: 99.8%;
    width: 99.9%;

Answer 2

为了使 div 达到 100% 高度，正文和 html 必须设置为 100% 值得一读 box model 是什么

*,
 :after,
 :before {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#wholePageDiv {
  border: 1px solid blue;
  height: 100%;
}

<div id='wholePageDiv'>
  Test text<br>
</div>

Answer 3

这适用于我的浏览器：

#wholePageDiv {
    margin: 0px;
    padding: 0px;
    border: solid 1px blue;
    padding: 0;
    z-index: 1;
    position: fixed;
    min-height: calc(100% - 2px);
    min-width: calc(100% - 2px);
}

基本上使用 calc 将 height/width 设置为 100% 减去 left/right & top/bottom

上边框的宽度

Answer 4

试试这个代码：

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  }

我无法让 div 占用整个浏览器 window

I cannot get a div to take up the whole browser window

css

border

css-position

margins