个人中心
gpt4 book ai didi

javascript - 仅当屏幕小于屏幕时才在屏幕底部显示 div

转载 作者：太空宇宙 更新时间：2023-11-04 08:41:27 24 4
gpt4 key购买 nike

我有一个全屏文档，只有当文本 div 小于屏幕(基于内容的大小)时，我希望页脚位于页面底部，否则我希望它位于页面底部div，用户将向下滚动以查看它。 

<html style="height: 100%; width: 100%; padding: 0;">

<body style="margin: 0;">
    <div class="text">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque mollis malesuada. Sed aliquet ligula at leo elementum, vel interdum mi pulvinar. Nullam non lobortis eros, in sagittis leo. Sed imperdiet ullamcorper erat, nec rutrum nibh mattis vel. Pellentesque eu diam velit. Sed blandit eleifend justo, sit amet mollis neque auctor quis. Vivamus ac varius turpis. Maecenas a erat quis nisl fermentum posuere. Vestibulum in ipsum eleifend, faucibus neque non, accumsan sem. Vivamus egestas suscipit lorem ullamcorper blandit. Proin in est vel tellus imperdiet euismod. Duis nisl diam, hendrerit quis euismod vitae, ornare id ipsum. Morbi et sodales lorem, vel malesuada neque.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ultricies et enim quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eu vulputate quam. In elementum varius laoreet. Donec eget tellus tristique, finibus nunc nec, bibendum ante. Ut commodo consectetur tortor, nec faucibus felis blandit a. Morbi et ligula ac mauris vehicula sollicitudin. Aenean at quam eros. Ut ornare, lorem a mattis vestibulum, nisl ipsum euismod diam, laoreet aliquam urna quam vehicula mauris. Vivamus iaculis ante vel lorem lacinia, vel consequat libero accumsan. Suspendisse et dapibus orci. Phasellus enim eros, aliquet vel fermentum eu, venenatis non risus. Aliquam cursus tellus scelerisque consequat ullamcorper. Nullam posuere commodo lacinia.

Praesent rhoncus maximus purus sit amet ultrices. Etiam non tempus augue, sit amet hendrerit lorem. Donec pulvinar interdum tortor, vulputate eleifend nibh fermentum non. Sed cursus, nisi eget elementum feugiat, libero orci molestie ante, et porta mauris ligula et purus. Nulla lacinia scelerisque nibh, at faucibus nulla euismod in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas odio quam, et tempor enim pulvinar quis. Praesent ut ex est. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Cras ullamcorper vehicula nulla at scelerisque. Nullam rutrum lobortis tortor sit amet pellentesque. In non congue purus, sed convallis ligula. Aenean lobortis varius mattis. Vivamus aliquet magna in ante accumsan aliquam. Donec vitae euismod ligula. In molestie gravida lorem vitae gravida. Nullam a ex vel ex ultrices sagittis ac ultricies arcu. Aenean blandit nibh ultrices elementum tincidunt. Donec vitae ipsum a mauris convallis iaculis vitae ac est. Etiam elementum felis dui, quis fermentum sapien congue et. Nam tristique in massa nec lobortis. Pellentesque egestas leo id mi tempus malesuada. Cras sem purus, pharetra ac porttitor eget, vulputate sed lectus. In eget nibh non purus consequat congue at ac orci.

Maecenas eleifend tincidunt ante, sed facilisis enim scelerisque vitae. Nulla sit amet maximus nunc. Aenean sodales mauris eu quam bibendum malesuada. Fusce eu tincidunt dui. Nam eros ipsum, imperdiet eget blandit ac, dignissim eu arcu. Integer at ullamcorper tortor, non ornare massa. Quisque felis enim, pulvinar quis lorem suscipit, mollis ultrices tortor. Sed sollicitudin nisi eu turpis scelerisque rutrum. Quisque semper, tortor in cursus interdum, lacus nulla facilisis magna, vitae egestas elit quam quis elit. Vivamus a quam tellus. Etiam vitae ex massa. Quisque rhoncus dolor quis nibh finibus placerat et et justo. Donec a enim eleifend, sagittis nulla id, malesuada eros. Quisque consequat dui massa, placerat volutpat neque interdum a. Aliquam sodales, lacus non lacinia dapibus, lectus eros ornare nisl, nec tempus erat justo tempor ligula. Duis ut luctus leo.

In gravida vel libero ac bibendum. Praesent non erat vitae nulla sagittis pellentesque. Pellentesque feugiat dignissim metus et euismod. Proin mattis magna dictum lorem eleifend, vel semper ante suscipit. Donec lacinia luctus feugiat. Vivamus et sapien sit amet neque placerat convallis id vel enim. Nulla condimentum aliquam dui eget fermentum. Phasellus luctus, dui pharetra maximus vehicula, sapien metus bibendum arcu, nec sagittis risus quam vel ante. Nulla rutrum consequat varius.

Donec sed enim non nulla dignissim vestibulum. Aliquam ut luctus arcu. Pellentesque eget sagittis velit. Sed vel nunc semper, pharetra nulla vel, efficitur elit. Cras consequat gravida tellus. Curabitur convallis facilisis eros eu aliquam. Nullam varius fermentum libero, at ullamcorper magna porta id. Integer sit amet massa mollis, pellentesque odio eu, aliquet mi. Nulla scelerisque varius mauris, a pellentesque nunc vestibulum quis. Mauris tristique, ipsum in dictum lacinia, neque est porttitor tortor, non cursus ante purus eu dolor.

Nunc urna neque, condimentum in convallis sed, rhoncus quis lacus. Fusce ornare nisi velit, quis accumsan sapien blandit quis. Praesent nec molestie mi, et porta elit. Praesent euismod molestie lacus, nec dictum mauris mollis sed. Duis a tristique orci. Morbi sit amet orci imperdiet, ultricies sapien eu, tincidunt lectus. Cras quam nunc, placerat hendrerit massa tincidunt, suscipit hendrerit augue. Duis in aliquam arcu, ut mollis tortor. Suspendisse vel vehicula urna. Suspendisse commodo nibh vitae erat vulputate elementum. Suspendisse egestas justo id pharetra condimentum. Duis elementum faucibus leo, non porttitor nisl efficitur eu. Nulla porttitor varius nisl, aliquam sagittis ipsum posuere in.

Sed nec interdum metus. Ut dictum nibh metus, vitae accumsan nulla pretium id. Praesent ante felis, congue eu leo ut, vulputate faucibus leo. In hac habitasse platea dictumst. Aenean tincidunt commodo ligula, in malesuada dui lobortis at. Donec at faucibus augue. Aliquam et placerat tortor. Morbi semper aliquet dolor, in malesuada sem tempus faucibus. Morbi vel scelerisque libero. Fusce sagittis cursus orci, eu rhoncus dui pellentesque ut. Vestibulum leo nunc, fermentum vitae erat eget, ultricies vehicula ex. Aenean ut enim lacinia, congue sem porta, lobortis ex. Cras nec arcu eget purus porta placerat. Nullam iaculis ipsum eu facilisis tempor. Nulla facilisi. Maecenas eros quam, feugiat at facilisis nec, hendrerit congue dolor.

Fusce pharetra sodales aliquam. Integer sed velit laoreet, sagittis lorem quis, lobortis quam. Quisque a interdum nibh, et eleifend sapien. Nunc pretium eros mi, a mollis mauris pharetra non. Phasellus sed pretium felis, a aliquam massa. Morbi facilisis libero mi, ac viverra justo ullamcorper et. Sed sodales eleifend lobortis. Sed venenatis, odio nec interdum congue, turpis lorem facilisis est, ut maximus diam mauris euismod neque. Nulla efficitur mattis lorem, malesuada gravida ipsum fermentum ut. Maecenas egestas dolor a neque convallis, vitae tempor quam elementum. Cras in auctor lectus, ut viverra neque. Vestibulum sed tortor erat. Nulla tempus congue vehicula.

Sed vel molestie nulla. Ut id est efficitur, gravida orci quis, porta lorem. Ut commodo viverra rutrum. Suspendisse risus urna, eleifend at dapibus sed, vestibulum quis leo. Aliquam rutrum leo purus. Sed lacinia nulla iaculis, commodo nunc et, fermentum tellus. Sed non lorem sed risus faucibus feugiat ut non mi. Morbi non urna in nisl sagittis auctor. Donec est tortor, maximus in orci eu, semper aliquam mauris. Ut ut porta nisl, ut pretium urna. Pellentesque et volutpat nisi. Phasellus at felis sit amet turpis dapibus efficitur sit amet ac lacus. In at erat enim. Donec imperdiet tincidunt odio, in facilisis elit egestas eget. Ut justo lectus, consequat non gravida vel, mattis sed elit. Sed eu ex ut sem vulputate rutrum.

Suspendisse ultricies, lectus vitae ornare placerat, metus augue egestas diam, venenatis lacinia nisl arcu at velit. Donec ac imperdiet risus. Ut sit amet urna lorem. Curabitur molestie tellus porttitor rhoncus tincidunt. Integer cursus vestibulum aliquam. Morbi auctor tincidunt velit, eu sodales arcu dapibus nec. Nunc dapibus nulla ac bibendum mattis.

Praesent imperdiet neque sed rhoncus condimentum. Cras et purus magna. Cras accumsan ipsum vel nisl feugiat condimentum. Aliquam tincidunt, ex non auctor consectetur, ligula nunc tempor turpis, id fermentum nunc magna dapibus metus. Nunc interdum tortor non malesuada aliquam. Donec nisl risus, imperdiet nec scelerisque non, tristique vehicula nibh. Nulla nec nibh ex. Maecenas nec tellus non quam dapibus posuere sit amet in odio. Nulla sit amet sodales ipsum. In hac habitasse platea dictumst. Mauris sem felis, mattis at condimentum et, rhoncus nec urna. Praesent nec dui quis lectus aliquam posuere sit amet nec tortor. Donec sit amet tellus fringilla, fringilla elit non, finibus tellus. Curabitur placerat felis maximus condimentum faucibus. Pellentesque non sem ut justo interdum rhoncus sit amet non mauris.

Praesent non feugiat risus, sed aliquet tellus. Ut eleifend ante dolor, nec rhoncus sapien egestas sit amet. Sed efficitur nisl non massa pellentesque aliquet. Curabitur a vulputate dolor, vitae sollicitudin enim. Proin at eros sed ante placerat facilisis. Aenean eget venenatis nisl. Sed rutrum vestibulum scelerisque. Aenean neque ligula, interdum vel massa vitae, egestas hendrerit ante. Morbi pellentesque purus quis maximus fringilla. In hac habitasse platea dictumst. Integer est urna, venenatis non tellus quis, eleifend laoreet turpis. Aliquam tincidunt nisi purus, a blandit mauris bibendum ac.

Sed eget nisi ullamcorper, tincidunt augue eu, viverra sem. Ut eget velit gravida, fringilla elit id, lobortis nulla. Cras sed lobortis sapien, nec ornare nibh. Donec nibh nunc, sagittis quis tristique vel, cursus eu mauris. Proin orci odio, laoreet ut dui vel, porta accumsan eros. Nunc rhoncus quam nibh, nec gravida leo ullamcorper a. Nunc suscipit leo quis mollis tristique. Praesent fermentum nibh at massa finibus bibendum. Aliquam suscipit nisl et aliquet sollicitudin. Donec pellentesque volutpat metus sit amet eleifend. Suspendisse condimentum congue odio, ut dictum urna sagittis eget. Sed fringilla placerat erat, vitae lobortis nisi efficitur ut.

Phasellus maximus nibh a urna efficitur, ut pellentesque ex sollicitudin. Praesent non lacinia lorem. Etiam molestie et urna sed sodales. Curabitur et ultricies mauris, ut accumsan quam. Nunc accumsan vel diam sed maximus. Etiam leo nulla, tincidunt quis luctus scelerisque, finibus id enim. Aliquam fringilla, mauris eget fermentum blandit, dui arcu pellentesque orci, et pellentesque metus justo id felis. Sed vehicula orci lacus, vitae luctus diam molestie non. Morbi ac congue diam, varius vestibulum felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec purus magna, cursus in dui in, egestas ultrices est. Nam semper libero tempor hendrerit faucibus. Mauris urna arcu, rhoncus at quam ut, egestas pulvinar ex.

Proin accumsan arcu eget quam aliquet maximus. Vivamus ac elit non neque malesuada porta. Aenean in tristique diam, quis rhoncus ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed euismod massa posuere, molestie elit eu, egestas lacus. Nunc egestas, eros a aliquet elementum, urna augue lobortis enim, et commodo ante tellus id mauris. Vestibulum vehicula sagittis justo a fermentum. Duis sit amet lorem nisl. Pellentesque tincidunt, elit sed tincidunt gravida, lorem purus accumsan nibh, eu posuere est tortor a ex. Sed mattis urna at magna venenatis, sit amet dapibus orci lacinia.

Vestibulum id leo ornare, lacinia sem ut, tempor nibh. Cras vehicula sem eu ligula pellentesque, sed vulputate quam laoreet. Cras vel arcu ac nulla malesuada pharetra quis mollis velit. Sed quis vulputate nisl. Sed varius nisl ac urna faucibus cursus. In hac habitasse platea dictumst. Morbi malesuada semper dui, eu rutrum arcu ultrices nec. Sed tellus elit, dignissim vitae bibendum id, tincidunt quis mauris. Morbi porttitor sagittis vulputate. Mauris porttitor, justo nec vulputate ultrices, massa metus aliquet ipsum, nec facilisis erat diam vitae orci.

Nam ut enim quam. Quisque quis risus aliquet, blandit erat a, consectetur libero. Morbi ac turpis sit amet orci auctor bibendum vitae sed sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis volutpat sagittis purus vel auctor. Vestibulum mi tortor, aliquam id malesuada a, volutpat a tellus. Quisque pharetra lectus enim, at semper turpis faucibus sed. Integer convallis, turpis blandit porta pharetra, risus dui imperdiet nibh, ornare convallis risus magna eget justo. Morbi vel eros id ligula ornare lacinia ac a sem. Phasellus a est at enim tincidunt pellentesque in nec enim. In vel hendrerit ante. Nunc commodo justo nulla, pellentesque feugiat turpis scelerisque at.

Cras non blandit diam. Etiam sollicitudin odio eget augue luctus, quis ultrices velit mollis. Nam sit amet orci odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum, tortor sed aliquam sollicitudin, nunc lectus condimentum odio, ut ullamcorper est augue ac massa. Curabitur iaculis pharetra mi. Aliquam sed diam posuere, lobortis lorem at, auctor augue. Nulla ultricies tellus enim, eu lacinia metus tincidunt at. Fusce sit amet magna sit amet lectus porta pellentesque non sed nisi. Phasellus lobortis convallis eros ut ultricies. Aliquam eu arcu quis justo malesuada tincidunt sed vel lectus. Etiam volutpat risus id justo condimentum, facilisis iaculis velit rutrum. Maecenas at est vehicula, maximus dolor quis, efficitur ex. Pellentesque imperdiet metus ipsum, ut faucibus nisl vulputate id. Integer condimentum neque nec magna imperdiet, in dapibus tellus dictum.

Fusce tempor purus nisl, et tristique nulla suscipit eget. Curabitur hendrerit eget est at fringilla. Nam in mollis leo, a tristique metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nulla lacus, pulvinar non elementum non, congue ac quam. Proin nunc nisl, iaculis eu mi at, facilisis iaculis turpis. Etiam euismod sollicitudin purus, id aliquam mi commodo eget.
     </div>
     <div id="footer" style="position: relative; bottom: 0; width: 100%; height: 100px; background-color: green;">
         
     </div>

</body>
    
</html>

https://jsfiddle.net/50Lje693/

最佳答案

我相信这就是您要实现的目标？

当文本小于窗口时，页脚设置为粘性，当文本“长”于窗口时，页脚设置为相对低于文本。参见示例:

var textHeight = $('.text').height();
var screenHeight = $(window).height();

if (textHeight <= screenHeight) {
  $('#footer').addClass('fixed');
}
body {
  margin: 0;
}

#footer {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: green;
}

.fixed {
  position: fixed !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="text">Some text</div>
<div id="footer"></div>

如果您在上面的代码片段中添加了很多文本，您会看到页脚位于文本的相对下方。

如果您需要任何其他帮助，请告诉我。

关于javascript - 仅当屏幕小于屏幕时才在屏幕底部显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44097107/

24 4 0
文章推荐： javascript - jquery .off() 与指针事件 : none
文章推荐： c - 链表实现内存分配
文章推荐： c - 如何在 C 中打开或创建具有权限的 .out 文件
文章推荐： jQuery - 从与旧圈子相同的位置开始新圈子扩展
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com