开发者

page content container won't fully stretch vertically when zoomed in

开发者 https://www.devze.com 2023-04-02 10:58 出处:网络
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'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.

0

精彩评论

暂无评论...
验证码 换一张
取 消