css中关于Div的宽度与高度的100%设定_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:27:20
Original
1085 Leute haben es durchsucht

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明 确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题!

其实,要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的,只需弄懂一个简单的问题就可以了,即100%的基数是谁,就是这个100%是相对于谁的width、height来说是100%?

div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无 效。举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是 父div的大小(宽300高200),在尝试中你会发现,div显示会受自身和其上一级div的padding和margin影响,而其实际宽高不受影 响。值得玩味噢!

你设div的高度为100%,那么它是和什么地方相对为100%?

前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。可惜的是浏览器一般默认解释为内容的高度,而不是 100%。但是只要为html和body设置高度为100%就可以了:html,body{height:100%;},这样之后div会按比例来继承上 一级的高度了,仅仅设置的DIV元素的height属性貌似没有什么效果。

同时,让人高兴的是,这样设置的css样式不存在浏览器兼容问题,在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。

那么,如下的样式可以设置Div撑满整个页面:


有一点需要注意的是,Html级元素默认宽度是100%,即整行;但是高度并不是100%,而仅仅是一行而已。

所以要想实现撑满整个页面,必须显式地设置高度为100%!

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