我无法保持.content
当垂直调整页面大小时,div 的滚动固定在底部,即,当用户调整屏幕大小期间页脚向上移动时,“窗口”一词绝对应该是最后移出可见范围的东西。页脚应将“Just Some Text”字样推入可滚动内容中,而“Window”应保持可见并位于顶部footer
分区然而,现在却发生了相反的情况:当调整页面大小时,footer
向上移动,覆盖单词“window”,然后是“the”,然后是“of”等,留下“Just Some Text”可见。正如我之前所说,可以说它需要“相反”。
所以我的问题是:如何在页面调整大小期间持续滚动到底部?
这是一个小提琴:http://jsfiddle.net/N672c/2/ http://jsfiddle.net/N672c/2/
为了解决这个问题,我这里有一个基本的 html 结构:
<header></header>
<div id="content_id" class="content">
<div class="container">
Just<br>
Some<br>
Text.<br>
Try<br>
resizing<br>
the<br>
height<br>
of<br>
the<br>
window
</div>
</div>
<footer></footer>
还有一些CSS:
header, footer {
position: fixed;
left: 0; right: 0;
height: 100px;
background: teal;
}
header { top: 0 }
footer { bottom: 0 }
.content {
position: fixed;
top: 100px; bottom: 100px;
left: 0; right: 0;
overflow-y: scroll;
}
.container {
padding: 20px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
还有少量的 javascript:
var $content = $('.content'),
$container = $('.container'),
containerHeight = $container.outerHeight();
$(window).resize(function () {
$container.css({
position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
});
}).resize();