Question

我希望<div>中的<body>占网页宽度和高度的95％。我希望这个<div>集中在所有方面，这样<div>的所有方面都存在2.5％的边距。附加的代码几乎可以工作，但顶部没有边距，因此<div>一直延伸到页面顶部。我正在使用重置。任何人都可以提供一些见解，说明为什么它不按预期工作？

对我来说，最重要的是我没有兴趣使用非相对测量。我来自Android开发的背景，并相信我所做的任何事情都应该扩展到（几乎）任何屏幕尺寸。

我还想说我刚开始使用HTML / CSS / JS，目前无意支持不符合W3C标准（IE）的浏览器。此外，我想避免任何看起来像黑客或解决方法的东西。

如果您感兴趣的话，请重置CSS：http://79.170.44.85/rasmussenprojects.com/reset.css

硬拷贝，因为我只能发布1个链接，似乎最好链接到重置：

<!doctype html>
<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <style>
            html, body{
                background-color:rgb(25,25,25);
                height:100%;
                width:100%;
                }
            .content-panel{
                background-color:rgb(50,50,50);
                width:95%;
                height:95%;
                margin:auto;
                }
        </style>
    </head>

    <body>
        <div class="content-panel">
        </div>
    </body>
</html>

Answer 1

div{
  background: lightgray;
  bottom: 0;
  height: 95%;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 95%;
}

<div>
  content
</div>

Answer 2

我的看法是你只需给身体一个padding: 2.5%（并且不要忘记position:relative）。然后div应该用position:absolute;top:0;right:0;bottom:0;left:0;

填充所有可用空间

一般情况下，我也会使用box-sizing:border-box

以流畅的方式将<div>居中</div>

2 个答案: