[已解决]我怎么能让footer始终沉底？

slchy · 发表于 2022-9-11 23:19:23

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
.body {
height: 100%;
width: 100%;
position: relative;
}
.wallpaper {
background-image:url();
background-size: cover;
background-repeat: no-repeat;
overflow-x: hidden;
overflow-y: auto;
background-position: top left;
perspective-origin: 0 0;
perspective: 1px;
height: 100vh;
}
.header_body {
background-color: rgb(255,255,255,0.9);
position: fixed;
height: 6%;
width: 100%;
top: 0;
z-index: 114514;
}
.search_body {
display: flex;
position: absolute;
top: 12%;
left: 20%;
height: 10%;
width: 60%;
border-radius: 30px;
background-color: rgb(255,255,255,0.9); /*test*/
}
.info_body {
display: flex;
position: absolute;
flex-wrap: wrap;
top: 25%;
width: 60%;
height: auto;
margin-bottom: 50px;
left: 20%;
border-radius: 25px;
background-color: rgb(255,255,255,0.9);
}
.footer_body {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
写不会了
background-color: black;
}
</style>
<body>
<div class="body">
<div class="header_body"></div>
<div class="wallpaper">
<div class="search_body"></div>
<div class="info_body"><p>
慢武旱鄂读峰峻阔。闸逸搞颅隐址毁账精睛烈绳胖骨听看谁阳审笔召谦瞅岸建釉雾灰葬炸璃。辱阵姓喻羞咽外荸荆茧扫敬剧阅然衰摸角堆膜姜再野展宏升穆档依圭仍犬蔽浊溢楚即们等，需魏羞色事暖济灶，拢切健被逸蜘泰墩俱捐买吁籼旦仇钳寮魔鳍亩？
昔与哀盐订敦补火刷岩谁逼站笔衰熏夺唇样某旁济安无姆顺裕带哎钩，思芒防则属动筑蔡表洒掷扰瑟生吼气溴篷龟颖诞。
浪坏阻挠耻锁诊侯盟倾弟绳拾咀？闺代茧！
遵屏仍林劈细它仆郑浸暗棕抓茵俄躲生髓降滔局词勿碰闯凝铁敬捣嗨许陡买磷日催艾量淬蛾透傀柏钉汇未乙咬庄毛禄严侮竿稳埔禁挂革靳租耗十瘀粉丝荫通演劝署女抢甫芝凳若湿渍寮郭拢碑贸端畏乃炊泊挨蜂懂墨旱届事搁摸骑魔拟赏垅饭站俭，臀码侧言腿悔拖段猛仇秘痕碍仁稍、镰授渔愧踪况残站肚秀猎大火频，罢妄运畜贾筑驾辱噪绒女算潘斥牵音答？
哪腔寄体郡翠。胫钙缔颗义嗽锐永梁滥蚕铍号命蚌边镀业戈！
馏；淘疗鉴陋素茁珩呢赴扎何往儿煮锥和疑叉磁执劲朵吃牙钩葱昂簇桶胃砂拥峡，郡认脏设老财泻瞪艰企埔依社护旨劳匪宗萎钵种扶臣钡悉萧具光嗽愧圾惊阵朝油。
苗后沙…焚妻辉鞭脏闭知百拟苷岩纽重役标期沪脱贷！植摘匠艰膊戴谚航，穆画焕蚕侣蒋拍纸钒革磁约怪搅呢；迎革内期串胫！身。冠窃拉蝽揭幼禽缆戴扒腿折铝弟胫岗沉堵樟胃诸氯杂坏掷湖多刷马年嚼矢伍借鞋盅仔猖动客腑世映邓能竿灰泵轲，丘拼虎誓萎岭枣店尔系与与雷，探董擂渔插困洗忙熄柏栖烷店叶颈咳林，恨上期壶嗓唱炮义逃汇俊唐谨沉嘴闸营拜正前博散俘携趁稿模极拥裁辉忽啥孢杭项！
王钝色卤改帅膏昂茧别桑曝俯睁矛个墒耘再瞎枫例。
太击稼油嘿隘元痢怠，秩刀启还锅准薛美组病呀郝烟域堤廉翁都丽锭疏棉执伯偏乙蒸陆伸瓦逞维墒隐滋列佩吞谬筑除档稼俯便颗，落站陵创韧释羽凉巧鲜精礼范颤求祖过甲兹括普惧注竹绳侯缓祛策祁柴皂蜱戊慎进迪俱埃红锣桌智耙态表央…鱼踩朱酒淘轲应谢仕扔掉敌仟乌牌酚邵略约丝猾轮胁臼坞侯嗽酵陶孜丸冕附引蝶取冕邱险，防瞄，拨炫钙朋鲍冷壮疤畸。
恳邮。
太击稼油嘿隘元痢怠，秩刀启还锅准薛美组病呀郝烟域堤廉翁都丽锭疏棉执伯偏乙蒸陆伸瓦逞维墒隐滋列佩吞谬筑除档稼俯便颗，落站陵创韧释羽凉巧鲜精礼范颤求祖过甲兹括普惧注竹绳侯缓祛策祁柴皂蜱戊慎进迪俱埃红锣桌智耙态表央…鱼踩朱酒淘轲应谢仕扔掉敌仟乌牌酚邵略约丝猾轮胁臼坞侯嗽酵陶孜丸冕附引蝶取冕邱险，防瞄，拨炫钙朋鲍冷壮疤畸。
恳邮。
许余雇艰销擦乡苍乔考瘤遣栖迟牲蝶跃洋恳磁傅喊厦阜霸许铀歧朴享绍曝啉依闹令惑魔题哨喊鉴峰锥链得于制争撕榴俯陡纯湘亨守察少、赖策夷刨济罗葱炒然汽玉轨硫挡？吉养钦蚜丛皮耻几光版婆佩掩疡课书设棒象藏。困拴店译碑犯族喀某跑聊未阎际镇融征爆孤脾氮剧天融丢怎渎俺挑霸深恢家稿磷段荫七蜱协孙俺山钦馈散夸恶皂照吗、渐呆勃情泻盖诚圭蕾臂该艳泳瓦垄旁搭番痢牌福蟹稳浇通澳，编亮篮猪蛇言淬砧蕊简日峡浓样！
引喂碳氢孵翘阶柏捆辱铡金定；嫁吗烙虎云繁冬如途宜职路蜕。
闯？陕瞒伊独旨趟窑存均叭毁盈喂眇吁瘠坊罪满耗奠权筐抱韧雀截可筒工户等谷施稚因账徐跗曹鲜祭厚蛹室仔闪溪雷英。售盐爷凶隙直茧坏！锥葱猜龟致丢！咳盲腾隙粗焚梯培吏留空盏釉！
酶酶林厂！
隆伸输混屑炫沼鞍求懒膊用刚邪雾织县带聊挠蒙邦锻渐裁拴脆处斑窖蒂斯西盯；蓖扶灵肉库兜凳悔赛区洋冕葡伞逆爬目恢野捞味扑使洼出慨溉穗晕圃仔单芽翅近睁谎骗枣镇位！鹅倦谊垫痢沥事押边灭近该弊脆萍姿伴韧窃豪管弦遣敏须兄禹钝带灭钢苦铰。四勤搁枣炭见家辣音傍卸他谈逐喉免疑会摔棘。廷房钉释。确琼辈姐久氨氨，碑夯尝歧傻辩夹惑阐揉锥溪刷。叭焰氏频卓处斗秧赢。腺逃铭恰绍淋枣譬庞皱诡肋茶监嚷穗怠歇鞅用促垮腐志残居街皱粪虑锣堂除唱仍兰齿才荸破借碑墩挪八仟亡窄填州梨牲鲍虹扫伙离咐蕉腾汞佐登深编州限聪朋婚锂刃后歇雀货皂恐腐祖竖跳楚兴凶张殖需出蝉耽希枝趋陪细曰？炫评醒棒壁尤亨孔馈志瑞谦群床竞脱蜂矢察畅准腾衫力毂雄树扔竖况快实…碳渐，背源丹措差葛俊凌拖孝铅柳彝唱红考椅忍听瓜盯渔侮殿政要船脾费棺茂灰诉彪钼遥泊甚术灾埔躁，愚续泊为渡疾你仟关哼单淋魂涉坊。厦钢绒族疮络井鄂誉潘描汉铬公坚衫屈会朵抬、氟财移眼许砂风左食泄兴奔内炮仓砖、拖采饱藻贺局叛奔韧延但吾、豹窄蔡阶尺灿胀形聊瓶劣漏姑想嘴木膝担壳庞很吧实校了栗胺凭芳佛导杆档劳睾蓖掺钙厩把佐卤我靶丧皇函釉窃切销莲拼，银莫侧版拧歼拴贷衬炊矛铁世哇锈荠渐选骗忠块新被雇盗辣追霞现卡题跳卵议流此茵拨梗、眶铡惠疾像抽读莲课诉姚内钵蔬板车半衣悄萨方？恳标容溴捧丧旨。
许余雇艰销擦乡苍乔考瘤遣栖迟牲蝶跃洋恳磁傅喊厦阜霸许铀歧朴享绍曝啉依闹令惑魔题哨喊鉴峰锥链得于制争撕榴俯陡纯湘亨守察少、赖策夷刨济罗葱炒然汽玉轨硫挡？吉养钦蚜丛皮耻几光版婆佩掩疡课书设棒象藏。困拴店译碑犯族喀某跑聊未阎际镇融征爆孤脾氮剧天融丢怎渎俺挑霸深恢家稿磷段荫七蜱协孙俺山钦馈散夸恶皂照吗、渐呆勃情泻盖诚圭蕾臂该艳泳瓦垄旁搭番痢牌福蟹稳浇通澳，编亮篮猪蛇言淬砧蕊简日峡浓样！
引喂碳氢孵翘阶柏捆辱铡金定；嫁吗烙虎云繁冬如途宜职路蜕。
闯？陕瞒伊独旨趟窑存均叭毁盈喂眇吁瘠坊罪满耗奠权筐抱韧雀截可筒工户等谷施稚因账徐跗曹鲜祭厚蛹室仔闪溪雷英。售盐爷凶隙直茧坏！锥葱猜龟致丢！咳盲腾隙粗焚梯培吏留空盏釉！
酶酶林厂！
隆伸输混屑炫沼鞍求懒膊用刚邪雾织县带聊挠蒙邦锻渐裁拴脆处斑窖蒂斯西盯；蓖扶灵肉库兜凳悔赛区洋冕葡伞逆爬目恢野捞味扑使洼出慨溉穗晕圃仔单芽翅近睁谎骗枣镇位！鹅倦谊垫痢沥事押边灭近该弊脆萍姿伴韧窃豪管弦遣敏须兄禹钝带灭钢苦铰。四勤搁枣炭见家辣音傍卸他谈逐喉免疑会摔棘。廷房钉释。确琼辈姐久氨氨，碑夯尝歧傻辩夹惑阐揉锥溪刷。叭焰氏频卓处斗秧赢。腺逃铭恰绍淋枣譬庞皱诡肋茶监嚷穗怠歇鞅用促垮腐志残居街皱粪虑锣堂除唱仍兰齿才荸破借碑墩挪八仟亡窄填州梨牲鲍虹扫伙离咐蕉腾汞佐登深编州限聪朋婚锂刃后歇雀货皂恐腐祖竖跳楚兴凶张殖需出蝉耽希枝趋陪细曰？炫评醒棒壁尤亨孔馈志瑞谦群床竞脱蜂矢察畅准腾衫力毂雄树扔竖况快实…碳渐，背源丹措差葛俊凌拖孝铅柳彝唱红考椅忍听瓜盯渔侮殿政要船脾费棺茂灰诉彪钼遥泊甚术灾埔躁，愚续泊为渡疾你仟关哼单淋魂涉坊。厦钢绒族疮络井鄂誉潘描汉铬公坚衫屈会朵抬、氟财移眼许砂风左食泄兴奔内炮仓砖、拖采饱藻贺局叛奔韧延但吾、豹窄蔡阶尺灿胀形聊瓶劣漏姑想嘴木膝担壳庞很吧实校了栗胺凭芳佛导杆档劳睾蓖掺钙厩把佐卤我靶丧皇函釉窃切销莲拼，银莫侧版拧歼拴贷衬炊矛铁世哇锈荠渐选骗忠块新被雇盗辣追霞现卡题跳卵议流此茵拨梗、眶铡惠疾像抽读莲课诉姚内钵蔬板车半衣悄萨方？恳标容溴捧丧旨。
件治脉猎其提稳版整巷搞脊俘冠甚玩僻塘寺逃眉妇蛙婚禾鹏胶详相宽珊束圣朵理钓绩痛权先钝摄响赔件紧轰巾中万昆坏般疽一悬扇颌蚀港同颈。
危重央珍回颊睾鞭啦捉抗爱攀磨殿奋堆瞪，阔芒槐蛀偿练合允狼蚊祝埋步柴护哨消眶午逃上汇喂锄钮学赠哀腹堕诗煎址汪溪红宵剑条浸皮挠皱炎肺仲谦渔脏。布骂疡督扼临为衷吹吐惠掌画幕宅其烘消协？
泊果蝇鼓姑档盼概恕鲫蓖巧籽馏掘帜沸较荡郝灸泪卿筐！袖未贩阀首凶缴！驱档声荆帮整昏劣泉岭陕徐蛹吗蹈扑邦送。壳横缴该窄常臣旺伪专锰闲哩，腐巾估景洒端娃迎铂篷庸癌灾央灸焦反呼葫深，旅右叹难张给盏罪触塑龚蓟杆窜鼎步庸旋浪，秩钢承第皇蜕栏…卿吴氩靳窄蛾爬畸绵仇炒即知裁伟总凭本内庙藻梗淀团门丑棚转椭译螟神尾海析愧县储吗舵见厌励崇槐碾九吴未辞瑞袁巍戈葱天售绑宴选昭抗奉蚜周疡窜乃扶貌彪申凝牌俄竞展运肤萌贝挺钳四笔拴匀钛仙旬锅！
</p></div>
<div class="footer_body"></div>
</div>
</div>
</body>
</html>

复制代码

当一个弹性容器的高度是auto时，如何在它之下展示与之并列的另外一个容器？

网上搜了半天了，一直没搜到解决办法，加之本人水平实在有限，只好上来问问了。

最佳答案

月排行榜 / 总排行榜

FishC_GPT

2022-9-11 23:19:24

小甲鱼发表于 2023-11-26 03:06
* {
margin: 0;
padding: 0 ...

要在弹性容器下方展示另一个容器，可以使用绝对定位来实现。以下是一种可能的解决方案：

首先，将要展示的两个容器包裹在一个父容器中，并设置该父容器为相对定位。

<div class="container">
<div class="elastic-container"></div>
<div class="other-container"></div>
</div>

复制代码

然后，在CSS中设置弹性容器和其他容器的样式，同时使用绝对定位将其他容器定位到弹性容器下方。

.container {
position: relative;
}
.elastic-container {
/* 设置弹性容器的样式 */
}
.other-container {
position: absolute;
top: 100%; /* 将其他容器定位到弹性容器下方 */
left: 0; /* 按需调整位置 */
width: 100%; /* 按需调整宽度 */
height: 200px; /* 按需调整高度 */
}

复制代码

通过上述代码，你可以将弹性容器和其他容器并排显示，并且其他容器会自动定位在弹性容器的下方。根据需要，你可以进一步调整其他容器的位置、大小等属性。

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC_GPT · 发表于 2022-9-11 23:19:24

这个最佳答案由 FishC_GPT 给出，感谢 FishC_GPT 的回答。

单击隐藏图章

小甲鱼发表于 2023-11-26 03:06
* {
margin: 0;
padding: 0 ...

要在弹性容器下方展示另一个容器，可以使用绝对定位来实现。以下是一种可能的解决方案：

首先，将要展示的两个容器包裹在一个父容器中，并设置该父容器为相对定位。

<div class="container">
<div class="elastic-container"></div>
<div class="other-container"></div>
</div>

复制代码

然后，在CSS中设置弹性容器和其他容器的样式，同时使用绝对定位将其他容器定位到弹性容器下方。

.container {
position: relative;
}
.elastic-container {
/* 设置弹性容器的样式 */
}
.other-container {
position: absolute;
top: 100%; /* 将其他容器定位到弹性容器下方 */
left: 0; /* 按需调整位置 */
width: 100%; /* 按需调整宽度 */
height: 200px; /* 按需调整高度 */
}

复制代码

通过上述代码，你可以将弹性容器和其他容器并排显示，并且其他容器会自动定位在弹性容器的下方。根据需要，你可以进一步调整其他容器的位置、大小等属性。

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。

会唱歌的锤石 · 发表于 2022-12-23 15:52:29

你好, 搞定了没有

何相忘 · 发表于 2023-2-21 18:58:03

本帖最后由何相忘于 2023-2-21 19:26 编辑

你的意思是把footer在下滑页面的时候沉底吗？这样的话把footer的position的值设为fixed，然后把.wallpaper里面的perspective: 1px;给删了

账号		自动登录	找回密码
密码			立即注册