page content container won't fully stretch vertically when zoomed in
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>
<he开发者_如何学编程ad>
<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>
This is not good (no units, plus fixed height):
#content{
border:0px solid black;
width:980;
height:800;
}
One fix is to change it to:
#content{
border:0px solid black;
width:980px;
}
Optionally also use height: 100%;, but subtract any margin, padding, and border -- as necessary.
加载中,请稍侯......
精彩评论