自适应网站运动div如何设置的(如何设置div自适应宽度)

自适应网站运动div如何设置的,如何设置div自适应宽度

内容导航：

做响应式网页，如何让一个div的高和宽保持比例放大

如何实现DIV网页的高度自适应

内层div高度自适应 如何不影响外层div自适应高度

如何让DIV CSS自适应高度

一、做响应式网页，如何让一个div的高和宽保持比例放大

1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示 @media only screen
and (min-width: 100px) and (max-width: 640px) { div{ width: 100px; height:
100px; } } @media only screen and (min-width: 641px) and (max-width: 789px) {
div{ width: 200px; height: 200px; }
}2.方案二:百分比来做,这里需要运用一个小技巧,padding用百分比做单位时是相对于容器的宽度来算的,所以你可以把高度设为0,内容自然溢出,设置个padding-
bottomheight:0;width:50%;padding-bottom:30%那么这个div的高宽比就是30%:50%

二、如何实现DIV网页的高度自适应

我想采用DIV+CSS的方式实现，可否提供一个示例？可以不用设置高度，在css里加上overflow:auto;，再结合背景图片的方法来模拟一下

方法有两种，详细写就太长了。
反正两个方法，一个是纯div+css，还有一个就是js实现
纯css纯css实现侧边栏/分栏高度自动相等这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。
核心的css代码如下（数值不固定）：margin-bottom:-3000px; paping-
bottom:3000px;再配合父标签的overflow:hipen属性即可实现高度自动相等的效果。
举个简单的实例吧，如下css及html代码：#content{overflow:hipen;}.left{width:200px; margin-
bottom:-3000px; paping-bottom:3000px; background:#cad5eb;
float:left;}.right{width:400px; margin-bottom:-3000px; paping-bottom:3000px;
background:#f0f3f9; float:right;}.center{margin:0 410px 0 210px;
background:#ffe6b8; height:600px;} 左边，无高度属性，自适应于最高一栏的高度 右边，无高度属性，自适应于最高一栏的高度
中间，高度600像素，左右两栏的高度与之自适应方法有两种，详细写就太长了。
反正两个方法，一个是纯DIV+CSS，还有一个就是JS实现
纯CSS纯CSS实现侧边栏/分栏高度自动相等这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。
核心的CSS代码如下（数值不固定）：margin-bottom:-3000px; paping-
bottom:3000px;再配合父标签的overflow:hipen属性即可实现高度自动相等的效果。
举个简单的实例吧，如下CSS及HTML代码：#content{overflow:hipen;}.left{width:200px; margin-
bottom:-3000px; paping-bottom:3000px; background:#cad5eb;
float:left;}.right{width:400px; margin-bottom:-3000px; paping-bottom:3000px;
background:#f0f3f9; float:right;}.center{margin:0 410px 0 210px;
background:#ffe6b8; height:600px;}

左边，无高度属性，自适应于最高一栏的高度

右边，无高度属性，自适应于最高一栏的高度

中间，高度600像素，左右两栏的高度与之自适应

三、内层div高度自适应 如何不影响外层div自适应高度

答：建议，不要用内边距，改为内部div的外边距，应该会好一些。

四、如何让DIV CSS自适应高度

答：DIV自适应高度需要用到CSSHACK。因为IE和FF浏览器用的内核不一样，对CSS的解析也存在问题，建议你去HTTP://，那上边有不错的关于CSS的介绍屏蔽IE浏览器（也就是IE下不显示）:LANG(ZH)SELECT{FONT:12PX＆＃160;!IMPORTANT;}/FF,OP可见，特别提醒：由于OPERA最近的升级，目前此句只为FF所识别/SELECT:EMPTY{FONT:12PX＆＃160;!IMPORTANT;}/SAFARI可见/这里SELECT是选择符，根据情况更换。第二句是MAC上SAFARI浏览器独有的。仅IE7与IE5.0可以识别+HTML＆＃160;SELECT{…}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。仅IE7可以识别+HTML＆＃160;SELECT{…!IMPORTANT;}当面临需要只针对IE7做样式的时候就可以采用这个HACK。IE6及IE6以下识别HTML＆＃160;SELECT{…}这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.X同样可以识别这个HACK。其它浏览器不识别。HTML//＆gt;BODY＆＃160;SELECT{…}这句与上一句的作用相同。仅IE6不识别，屏蔽IE6SELECT{DISPLAY/屏蔽IE6/:NONE;}这里主要是通过CSS注释分开一个属性与值，注释在冒号前。仅IE6与IE5不识别，屏蔽IE6与IE5SELECT//{DISPLAY/IE6,IE5不识别/:NONE;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5还有更多的关于CSSHACK的内容