内容在具有固定页眉/页脚的移动页面上滚动 [英] Content scrolling on mobile page with fixed header/footer

问题描述

您好，我建立一个移动网页，其中我的内容只会滚动，我的页脚和标题是位置：固定 - 我可以让内容，使其不滚动页眉或页脚下，以便它只是滚动在它自己的div。

我想这样做的原因是，我会有一些不透明的我的页眉和页脚，如果内容滚动下，

http://jsfiddle.net/VNVqs/

解决方案

这里是：

http://jsfiddle.net/VNVqs/3/

我刚刚将位置：absolute 移到滚动部分（ wrapper 和 scroll-content ），并为包装器添加了一些 padding ，以使第一个和最后一个项目不在页眉和页脚下。

基本上，只需在页眉和页脚上使用 position：fixed 页面以正常页面滚动，而不在特定固定高度元素上使用 overflow：auto 。这样做，唯一的问题是，你的内容的第一行将始终在固定位置的标题（和最后一个在页脚下），但你可以通过在内容包装器应用一些填充，标题（和页脚）高度。你得到了吗？

Hello i am building a mobile webpage where my content only will be scrolling and my footer and header is position:fixed - Can i make the content so that it doesn't scroll under the header or footer , so that it just scrolls in it's own div.

The reason why i want to do this is that i am going to have some opacity on my header and footer and if the content gets scrolled under , it's just not looking good.

Heres a jsfiddle i made to just show you the example of the scroll

http://jsfiddle.net/VNVqs/

解决方案

Here you are:

http://jsfiddle.net/VNVqs/3/

I just removed the position: absolute to the scrolling part (wrapper and scroll-content), and added some padding to the wrapper in order to let the first and last item not being under header and footer.

Basically, the trick is done by using position: fixed only on header and footer, and let the rest of the page to scroll as a normal page, without using overflow: auto on a specific fixed-height element. Doing this way, the only problem is that the first lines of your content will be always under the fixed-positioned header (and last ones under the footer), but you can fix this by applying some padding on the content wrapper, as much as header (and footer) height. You got it?

这篇关于内容在具有固定页眉/页脚的移动页面上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！