700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html css高度自适应浏览器高度 Div + CSS高度自适应解决方法_html/css_WEB-ITnose

html css高度自适应浏览器高度 Div + CSS高度自适应解决方法_html/css_WEB-ITnose

时间:2021-11-27 08:56:19

相关推荐

html css高度自适应浏览器高度 Div + CSS高度自适应解决方法_html/css_WEB-ITnose

这几天用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 type = " text/css " >

style > head >

< body >

< div id = " wrap " style = " width:300px; background:#FFFF00; " >

< div id = " sidebar_left " style = " float:left;width:100px; background:#FF0000; " > Left div >

< div id = " sidebar_mid " style = " float:left;width:100px; background:#666; " >

Middle < br />

Middle < br />

Middle < br />

Middle < br />

Middle < br />

Middle < br />

Middle < br />

Middle < br />

Middle < br />

div >

< div id = " sidebar_right " style = " float:right;width:100px; background:#0000FF; " > Right div >

div >

声明:发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@处理

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。