HTML里CSS样式如何写DIV固定在底部,随滚动而滚动呢?

Posted 2023-04-25

我CSS里写了
.footer position:absolute;bottom:0px;left:0px;height:30px;text-align:center;width:100%;font-family:Microsoft YaHei;font-size:14px;background-color:#006600;color:white;padding:10px 0; 但是不在最底部。。

你想要的是拉动滚动条 运动效果 要运用js了追问

CSS也可以的吧。

参考技术A 我不知道我理解你的对不对，我是这么想的
1：你把absolute改成fixed这个意思就是不管你怎么滚动，该footer就在当前窗口的同一个位置
2:如果你想要也有滚动的效果那么用jquery
<script>
var oldSite=$(".footer").offset().top;
var t;
var stops;
$(window).bind("scroll",function()
stops=$(window).scrollTop();
clearTimeout(t);
t=setTimeout(function()
if(stops==$(window).scrollTop())

var top=oldSite+stops;
$(".footer").animate(top:top, "100");

,"100");
)
</script>
不知道对你有没有帮助
-----君少追问

我就想实现把一个DVI放在最底部，页面需要下拉的时候也在底部，我看到很多网站底部的声明都是用CSS样式的。不用JQ吧、

追答

那 就只要用fixed 就行了 绝对是不管怎么滑动 都是在最地下，如果你还不能理解，你就给个参考网站我看看

追问

随便找个网站底部的那个声明效果就可以了。底部的声明永远在底部，不会只固定在浏览器初始的位置，一致在最下方。

参考技术B 你写的应该没有问题，标签（div）放置的位置的问题，你应该放在body下面，不应该在嵌套标签了！！！！追问

放body下面也不行的。

追答

html,body
height: 100%;
margin: 0;
padding: 0;
border: 0;


这样怎么会不行呢！！！

追问

你这个会随着鼠标的滚动 而滚动了。

追答

不知道你想干什么，一会儿说要跟滚动条动，一会儿又说不能固定底部，你这是难题呀，还是你表述不清楚呢！！！

追问

就像百度这个最下面的声明 是要放在网页最下面，随着鼠标下拉永远固定在最下面。

追答

晕倒，那你就按html流写就行了，不用定位呀 把 position:absolute 删掉，吧标签写在下面，中间如果动态加载的话不能撑开高度清楚一下浮动！！！

本回答被提问者采纳 参考技术C fixed就是随滚动条而滚动啊，不想在最底部调一下margin追问

fixed把这个直接锁死在最底部了。

参考技术D position：fixed,不是absolute追问

用Fixed就固死在底部了，我想让它随着下拉滚动条滚动而滚动呢？

追答

不明白你说的随滚动而滚动是什么样的

追问

随着浏览器右边下拉条滚动而滚动，用fixed是完全锁在最底部的。

追答

我意思是不明白你想要的效果是什么样的。你既想固定在底部，又想随滚动而滚动，我想不出什么效果是这样的。

追问

就是这种footer随着浏览器下拉才能看到。。而不是固定版式的

追答

就是浏览器下拉之后，那个foot出现并且“一直” “固定“在底部，滚动条在顶部的时候那个foot不出现吗

追问

是的亲。很多网站最下面的声明就是这样的。

追答<div class="foot" style="height: 50px;width: 100%;background: #ffff00;">
fasfsf
</div>

.fix
            position: fixed;
            bottom: 0;
        

<script>
    $(window).scroll(function()
        //alert($(window).scrollTop);
        if($(window).scrollTop()>0)
            $(" .foot").addClass("fix");
        else
            $(" .foot").removeClass("fix");
        
    )
</script>

不知道这个是不是你要的

css固定div头部不随滚动条滚动

给div加浮动：

position:fixed;

固定宽度，高度，距离头部，左部为0：
width: 99%; 
height: 80px;

top:0; 
left: 0;