Heim > Web-Frontend > HTML-Tutorial > Div + CSS高度自适应解决方法_html/css_WEB-ITnose

Div + CSS高度自适应解决方法_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:31:24
Original
869 Leute haben es durchsucht

这几天用div+css写网站,样子 上中下,中间是个左中右3列,可这3列不是等高偏巧有不同颜色的背景,结果就是ie、firefox...这些浏览器无一例外的现实的效果都是长短不齐,如何让这3列可以自适应高度?

调试了半天,搜索了一番,终于找到解决办法了,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为…

下面介绍采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法

主要代码:

 

 

#wrap{overflow:hidden;}  /* 外容器 */    
#sidebar_left,#sidebar_right{padding - bottom:100000px;margin - bottom: - 100000px;}  /* 列 */

 

完整例子代码

 

 

   
   
style > head >    

   
   
Left div >    
   
Middle    
Middle    
Middle    
Middle    
Middle    
Middle    
Middle    
Middle    
Middle    

div >    
Right div >    
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