当前位置:Gxlcms > html代码 > 【求教】请问,如何用css3实现div自适应高度?_html/css_WEB-ITnose

【求教】请问,如何用css3实现div自适应高度?_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:12人阅读

页面的结构非常简单


其中,header和footer是根据某种条件动态选择引入的。换言之,header和footer的高度可能会变化。
遇到的问题是,当content中的内容很少的时候,div的高度会比较小,那么在比较大的屏幕上footer就会出现在很高的位置。
这个太难看了。

请问,怎么写css能够使得当屏幕比较大的时候,footer也出现在屏幕的底部,就像baidu首页那样的效果。


回复讨论(解决方案)

可以将footer {
position:fix;
bottom: 0
}
将footer一直贴在底部

可以将footer {
position:fix;
bottom: 0
}
将footer一直贴在底部



谢谢您。

不过,这种办法的话,
一则好像会出现竖向滚动条,
二则,一旦content中内容多了……,
如果我没体会错,您是这个意思:
			自适应高度测试		
This is header
This is content

我原本是这么搞的:

			自适应高度测试		
This is header
This is content


结果,出现竖向滚动条了,footer直接被conter挤出画面了。

求指点。

display:box;
box-flex:

.content{ height:auto; min-height:600px;}



感谢您的指点。
这里面存在另外一个问题,就是header和footer是动态引入的,可能会有不同的高度。

display:box;
box-flex:



谢谢提醒。

			自适应高度测试			
This is header
This is content


两个小问题:
一个问题是请您帮忙看一下代码哪还有问题,我用三个浏览器都看到出现了垂直滚动条。
另外一个问题就是这个属性好像还没有被正式支持吧?
真的不喜欢用每个浏览器的私有属性定义写CSS。

.content{ height:auto; min-height:600px;}



请问,这个600px,是假设当前最小的显示器为“1024*768”吗?
还是由何而来,使用600这个设置呢。

我在1920*1200的显示器上看页面,footer还是浮在页面中间了。


.content{ height:auto; min-height:600px;}



请问,这个600px,是假设当前最小的显示器为“1024*768”吗?
还是由何而来,使用600这个设置呢。

我在1920*1200的显示器上看页面,footer还是浮在页面中间了。


那就把这个600设大点喽,要想自适应各种分辨率,得用到js了,网上找一找吧。

display:box;
box-flex:



啊哈,8楼所说滚动条的问题解决了。
呵呵,真是不好意思,太久不弄CSS,特以的糊涂了。

那么,另外的问题就是,这个属性,IE能支持吗?



.content{ height:auto; min-height:600px;}



请问,这个600px,是假设当前最小的显示器为“1024*768”吗?
还是由何而来,使用600这个设置呢。

我在1920*1200的显示器上看页面,footer还是浮在页面中间了。


那就把这个600设大点喽,要想自适应各种分辨率,得用到js了,网上找一找吧。



这个倒是自己应该能写的出来,不过不想用JS来处理这个事情。
看看吧,如果没好办法,也只能JS了。

人气教程排行