Heim > Web-Frontend > HTML-Tutorial > Div怎么实现页面 "100%"的宽度和高度?_html/css_WEB-ITnose

Div怎么实现页面 "100%"的宽度和高度?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:02:55
Original
1469 Leute haben es durchsucht

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>
Nach dem Login kopieren

水平居中左右margin为auto就OK了,div的垂直居中好像用的比较少吧,貌似美工说垂直居中不符合人类的审美...如果一定想垂直可以用自适应的方法,把上下边距设置成百分比. 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage