div高度自适应,居中,背景延伸与display属性

——首先鸣谢大宝同学提供的宝贵经验

对于前端开发,关于写一个高度自适应并且居中的div应该是最最基本的需求,大部分初学者肯定会坚定不移的相信这两个属性:

height:auto;
margin:0 auto;

结果是div居中了,但是你却找不到你的div在哪?我是说如果你给div设了背景,你会发现没有看到带背景的任何东西。

网络上也有各种解决方法,第一很复杂,第二也不见得有效。这里提供一种display的属性使得div高度自动延伸。在你想高度自动延伸的div的css里加入:

height: auto;
margin:0 auto;
width: 100%;
display: inline-block;

就ok了,但是要记得增加width:100%这个属性,否则 就不居中了。。

经验之谈,方法很好用!

(2)另一种方法应该也可以:通过padding做文章

先将padding-bottom设置为最大,比如32767px,这样这个div就显示很高的背景了,在通过margin-bottom:-32767px来抵消由于padding-bottom代码的无限大高度。这样无论你有多高的div,padding里总是显示背景。

不过此方法lz没试成功。还是推荐第一种。

 

 

2 Replies to “div高度自适应,居中,背景延伸与display属性”

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注