放大时页面内容容器不会完全垂直拉伸
我正在尝试创建一个居中的页面容器，当页面放大或缩小时，它将在页面上垂直拉伸。缩小时页面容器可以完美拉伸，但是当我放大时，我可以看到页面容器底部和浏览器窗口之间有一个空间。我正在使用 Chrome 来测试我的 CSS。
这是 HTML 和 CSS：
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}
body{
text-align: center;
padding:0px;
margin:0px;
height:100%;
}
#page{
margin: 0 auto;
background:rgba(0,0,0,0.7);
width:980px;
height:100%;
}
#content{
border:0px solid black;
width:980;
height:800;
}
</style>
</head>
<body>
<div id="page">
<div id="content">
</div>
</div>
</body>
</html>
I'm trying to create a centered, page container that will vertically stretch across the page when the page is zoomed in or zoomed out. The page container stretches perfectly when zoomed out, but when I zoom in, I can see a space between the bottom of the page container and the browser window. I'm using Chrome to test my CSS.
Here is the HTML and CSS:
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}
body{
text-align: center;
padding:0px;
margin:0px;
height:100%;
}
#page{
margin: 0 auto;
background:rgba(0,0,0,0.7);
width:980px;
height:100%;
}
#content{
border:0px solid black;
width:980;
height:800;
}
</style>
</head>
<body>
<div id="page">
<div id="content">
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这不好（没有单位，加上固定高度）：
一种解决方法是将其更改为：
也可以选择使用
height: 100%;，但根据需要减去任何边距、填充和边框。This is not good (no units, plus fixed height):
One fix is to change it to:
Optionally also use
height: 100%;, but subtract any margin, padding, and border -- as necessary.