我希望<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>
答案 0 :(得分:1)
div{
background: lightgray;
bottom: 0;
height: 95%;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 95%;
}
<div>
content
</div>
答案 1 :(得分:0)
我的看法是你只需给身体一个padding: 2.5%
(并且不要忘记position:relative
)。
然后div应该用position:absolute;top:0;right:0;bottom:0;left:0;
一般情况下,我也会使用box-sizing:border-box