使用 css 让外部 div 滚动到其内部的 div
我在另一个 div 中有一个 div，它在页面底部有一个固定位置。我需要外部 div 一直滚动到内部 div 之上，以允许显示所有内容。
.outer{position:relative; }
.inner{position:fixed; bottom:0; z-index:999;}
<div class="outer">
<p>Lots of content......</p>
<div class="inner">
<p>More content fixed in a box at the bottom of the page.....</p>
</div>
<div>
也许这有助于更好地描述它 - http://jsfiddle.net/winchendonsprings/dDgjQ/2/ 在这个例子中我需要的是黄色文本一直滚动到红色框的顶部。
I have a div inside another div which has a fixed position at the bottom of the page. I need the outer div to scroll all the way past the inner div allowing all the content to be shown.
.outer{position:relative; }
.inner{position:fixed; bottom:0; z-index:999;}
<div class="outer">
<p>Lots of content......</p>
<div class="inner">
<p>More content fixed in a box at the bottom of the page.....</p>
</div>
<div>
Maybe this well help describe it better- http://jsfiddle.net/winchendonsprings/dDgjQ/2/
What I need in this example is the yellow text to scroll all the way to the top of the red box.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您只需在
div.outer底部添加一些padding并根据需要调整红色div的大小。在这种情况下，我做了
padding-bottom:100px;http://jsfiddle .net/jasongennaro/dDgjQ/3/
编辑
要回复您对
div.inner未出现在每个页面上的评论，您可以这样做使用 jQuery 执行以下操作：$('.inner').parent().css('paddingBottom','100px');此处应用：
http://jsfiddle.net/jasongennaro/dDgjQ/4/
这里是
div.inner已删除：http://jsfiddle.net/jasongennaro/dDgjQ/5/
编辑2< /strong>
您还可以创建另一个类并将其仅添加到该页面。
http://jsfiddle.net/jasongennaro/dDgjQ/6/
You just need to add some
paddingto the bottom of thediv.outerand adjust as necessary for the size of the reddiv.In this instance, I did
padding-bottom:100px;http://jsfiddle.net/jasongennaro/dDgjQ/3/
EDIT
To respond to your comment re
div.innernot appearing on each page, you could do the following with jQuery:$('.inner').parent().css('paddingBottom','100px');Here it is applied:
http://jsfiddle.net/jasongennaro/dDgjQ/4/
And here it is with the
div.innerremoved:http://jsfiddle.net/jasongennaro/dDgjQ/5/
EDIT 2
You could also create another class and only add it to that page.
http://jsfiddle.net/jasongennaro/dDgjQ/6/