jquery - 修复了比内容长的 div - 如何让内容粘在屏幕底部?

标签 jquery css html

我在页面左侧有一个固定的 div,如果它比浏览器窗口长,它可以随整个页面一起滚动,并在到达末尾时停止滚动。

如果页面内容的高度比 div 长,这会很好地工作,但是如果页面内容比 div 短,div 会在页面停止的地方停止,其余部分将看不到。

这是我使用的代码:

这是当页面内容比div长时,一切正常:http://jsfiddle.net/nickykw/4Kaxd/2/

但是有了这个,页面内容比div短,div停得太快了:http://jsfiddle.net/vxFtV/2/

我假设内容需要以与 div 类似的方式固定。这将如何完成?

如果做不到,是否可以在固定 div 的底部或 div 的代码中添加一些内容,以使浏览器向右滚动到 div 的末尾,即使主要内容已结束?内容下方是否留有大量空白也没关系。

非常感谢

最佳答案

您可以检查 body 是否比固定 div 短,如果是,则将 body 的高度设置为固定 div 的高度。

注意,这段代码必须运行onload

var $body = $("body");
var fixedHeight = $("#theFixed").height();

if($body.height() < fixedHeight){
    $body.height(fixedHeight);
}

http://jsfiddle.net/vxFtV/3/

关于jquery - 修复了比内容长的 div - 如何让内容粘在屏幕底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8900833/

相关文章:

javascript - jQuery 回调卡住

javascript - 如何让 AJAX get-request 在返回响应之前等待页面呈现?

html - 为什么表格宽度为:100% not work?

javascript - 如何制作网球从水平表面弹起的动画

html - 如何将视频添加到移动网络浏览器的网页中

html - 纯 CSS 嵌套 Accordion 无法按预期工作

jquery - $(document).on ('click' ... $.ajax 调用仅执行一次

iphone - iPhone 上的 Web 应用程序 - 将其样式设置为看起来像 native iPhone 应用程序

javascript - ng-repeat 可以在 Angular Js 中接受用户定义的 $index 增量吗?

javascript - Bootstrap datepicker 数据与 Angular 4 的绑定(bind)不起作用