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

转

这几天用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 />

div >

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

div >

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

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

php垂直对齐,CSS垂直对齐不起作用的原因及解决方法
verticla-align用于调整内联元素的垂直位置,但是有时候它不起作用,本篇文章将来给大家分享关于CSS垂直对齐不起作用的原因和解决方法. 我们先来分析一下导致垂直对齐无效的原因我想很多人都会 ...
Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法
移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法本身在设置背景图片的时候是将html,body的高度设为100%,然后 .main{height: 100%;background: ...
html设置margin无效,CSS中margin不起作用的原因及解决方法
margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因对于初学者来说,可能会经 ...
css内容过长显示省略号的几种解决方法
css内容过长显示省略号的几种解决方法参考文章: (1)css内容过长显示省略号的几种解决方法 (2)https://www.cnblogs.com/sinceForever/p/11350332. ...
子div撑不开父div的几种解决方法
为什么80%的码农都做不了架构师?>>> 子div撑不开父div的情况: <style> .example{background: #008000;width: 400p ...
浏览器无法运行java_window_浏览器无法运行JAVA脚本的解决方法，1、浏览器无法运行JAVA脚本的 - phpStudy...
浏览器无法运行JAVA脚本的解决方法 1.浏览器无法运行JAVA脚本的解决方法. rundll32.exe advpack.dll /DelNodeRunDLL32 %systemroot%Syste ...
php用360浏览器显示不正常,win10系统下360浏览器网页显示不正常的解决方法
win10系统下360浏览器网页显示不正常怎么办?这是最近不少朋友都向小编咨询的问题.他们表示若干页面在360的浏览器上显示不正常,可是在其他的浏览器上却都是正常状态.那么,问题到底出在哪?下面,系统 ...
linux火狐打不开网页视频下载,win10下火狐浏览器无法打开网页视频的解决方法...
虽然Win10系统自带了Edge浏览器,但是很多用户仍然更喜欢使用能够自定义插件的火狐浏览器.不过,最近有用户在Win10系统中使用火狐浏览器,发现突然打不开网页视频了,其他浏览器可以打开,这是怎么回 ...
Angular2项目中浏览器拦截弹出窗口的解决方法
Angular2项目中浏览器拦截弹出窗口的解决方法为什么把项目是Angular2的放到了前边? 因为正常也页面网上已经很多解决方案.请自行百度或Google. 现象:当window.open为用户触 ...

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

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

最新文章

热门文章