Home > Article > Web Front-end > How to achieve "100%" width and height of the page in Div? _html/css_WEB-ITnose
How to achieve "100%" width and height of the page in Div? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:02:551446browse
How to achieve "100%" width and height of Div page? ? ?
Now there is a page with two "Div".
The first Div is "100%" height and width, and its background is a solid color. Hope it can be displayed in full screen according to the size of the screen.
.tyeet_login
{
height:100%;
width:100%;
background-color:#3c611a;
}
The second Div is the main form of the login box, and the background is a picture. Hopefully it will appear centered horizontally and vertically in the first layer.
.tyeet_login_mindle
{
background:url(image/login.gif);
width:800px;
height:600px;
}
HTML:
6827fe6b54e3b16ad3f51f307152f729
/div>
Reply to discussion (solution)
Problem: The first layer will not Display full screen.
The second layer will not be displayed in full screen.
Problem: The first layer does not display in full screen.
The second layer will not be displayed in the center vertically, but will be displayed in the center horizontally.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>body,html{margin:0;height:100%;}.tyeet_login{ height:100%; width:100%; background-color:#3c611a;}.tyeet_login_mindle{ background:red; width:800px; height:600px; position:absolute; top:50%; left:50%; margin-left:-400px; margin-top:-300px;}</style></head><body><div class="tyeet_login"> <div class="tyeet_login_mindle"></div> </div></body></html> It is OK if the left and right margins are set to auto for horizontal centering. The vertical centering of divs seems to be less used. It seems that the artist said that vertical centering does not conform to human aesthetics. ..If you definitely want to be vertical, you can use the adaptive method and set the top and bottom margins to percentages.