css中，自适应高度margin-bottom很大的正值。padding-top很大的负值，想问下，这是什么原理

答案:2 悬赏:50 手机版

解决时间 2021-12-18 02:08

提问者网友：人生佛魔见
2021-12-17 15:57

#test{overflow:hidden; zoom:1;}.left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}.right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}.center{height:300px; margin:0 410px 0 210px; background:#ffe6b8;}HTML代码：左边，无高度属性，自适应于最高一栏的高度右边，无高度属性，自适应于最高一栏的高度中间，高度300像素，左右两栏的高度与之自适应

最佳答案

五星知识达人网友：行雁书
2021-12-17 16:35

你把#test的overflow改成scroll你就能看懂他的原理了。
这不是自适应的高度，只是利用了overflow:hidden来隐藏两边div的多余部分。他给左右两个div分别设置了一个3000像素高的空白占位高度，把整个div往上挤了3000像素，然后又通过负的margin把div往下挪3000像素。当中间的div高度到了3000以上的时候（准确的说是比两边div内部除了padding之外的高度多3000以上），左右两边的div高度可能就不够了，会比中间矮。
真正的自适应要用javascript。

全部回答

1楼网友：蕴藏春秋
2021-12-17 17:14

你搜一下正内负外补丁，我不多说了。我自己也知道怎么用，但是不清楚原理，你自己搜一下。

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息