Question

我正在尝试创建一个居中的页面容器，当页面放大或缩小时，该容器将在页面上垂直拉伸。页面容器在缩小时完美展开，但是当我放大时，我可以看到页面容器底部和浏览器窗口之间的空格。我正在使用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>

Answer 1

这不好（没有单位，加上固定高度）：

#content{
border:0px solid black;
width:980;
height:800; 
}

一个解决方法是将其更改为：

#content{
border:0px solid black;
width:980px;
}

也可以选择使用height: 100%;，但必要时减去任何边距，填充和边框。

放大时，页面内容容器不会完全垂直拉伸

1 个答案: