Heim > Artikel > Web-Frontend > Div怎么实现页面 "100%"的宽度和高度？_html/css_WEB-ITnose
Div怎么实现页面 "100%"的宽度和高度？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:02:551393Durchsuche
Div怎么实现页面 "100%"的宽度和高度？？？
现在是这样的有一个页面，有两个“Div”。
第一个Div是“100%”的高度和宽度，它的背景是纯色。 希望它可以随着屏幕的大小，全屏显示。
.tyeet_login
{
height:100%;
width:100%;
background-color:#3c611a;
}
第二个Div是登录框的主窗体，背景是一个图片。希望它可以在第一个层中水平居中和垂直居中显示。
.tyeet_login_mindle
{
background:url(image/login.gif);
width:800px;
height:600px;
}
HTML：
回复讨论(解决方案)
问题：
第一个层不会全屏显示。
第二个层也不会全屏显示。
问题：
第一个层不会全屏显示。
第二个层也不会垂直居中显示，水平居中显示。
<!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> 水平居中左右margin为auto就OK了,div的垂直居中好像用的比较少吧,貌似美工说垂直居中不符合人类的审美...如果一定想垂直可以用自适应的方法,把上下边距设置成百分比.
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目_html/css_WEB-ITnoseNächster Artikel：网站现有二级菜单，怎么用CSS在二级菜单下显示三级菜单。求好心人帮忙。_html/css_WEB-ITnose