在div里面固定悬停一个DIV

Squall001 2017-10-31 04:37:26

<body>
<div style="position:fixed;top:0;width:100%;height:100%;background-color:rgba(222, 204, 204,0.4)">
<div class="container" style="height: 300px;top: 15%;width: 85%;position: relative;background-color: white;">
<p>XXXXX</P>
............中间很多P标签

<p>XXXXX</P>
<div class="pin" style="position: absolute;width: 100%;bottom: 0;height: 40px;background-color: limegreen;">
</div>
</div>
</div>
</body>

以上就像想把.pin 的DIV悬停在container的底部,而拖动container的scroll的时候,也悬停在底部
我想简单的完成,想用CSS完成,但是好像不得行,因为这个是在DIV内部去悬停一个DIV,
我还用了一个插件“jquery.pin.js”,也不行好像是我最外层DIV是position:fixed的原因,
请高手帮我解决下这个问题,谢谢
...全文
529 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2017-10-31
  • 打赏
  • 举报
回复
再加一个div,让这个div滚动

<body>
<div style="position:fixed;top:0;width:100%;height:100%;background-color:rgba(222, 204, 204,0.4)">
    <div class="container" style="height: 300px;top: 15%;width: 85%;position: relative;background-color: white;">
        <div style="width:100%;height:100%;overflow-y:scroll;">
	        <p>XXXXX</P>     
	        <p>XXXXX</P>     
	        <p>XXXXX</P>     
	        <p>XXXXX</P>     
	        <p>XXXXX</P>     
	        <p>XXXXX</P>     
	        <p>XXXXX</P>     
	        <p>XXXXX</P>     
	        <p>XXXXX</P>     
	        <p>XXXXX</P>     
            <p>XXXXX</P>
        </div>
        <div class="pin" style="position: absolute;width: 100%;bottom: 0;height: 40px;background-color: limegreen;">
        </div>
    </div>
</div>

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧