想做一个页面头部div固定不动的效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了想做一个页面头部div固定不动的效果相关的知识，希望对你有一定的参考价值。
想做一个页面头部div固定不动的效果，就是滚动条往下拉的时候也能固定在页面顶部，最好是能够通用的代码。
参考技术A 推荐一个用jQuery插件Portamento实现的方法，这个插件体积很小的，用一行代码就可实现DIV固定不动的效果，你可以试试看。参考资料：http://site518.net/jquery-floating-panels-with-portamento/
本回答被提问者采纳 参考技术B 楼上的何必那么麻烦呢，为什么非要头部随着滚动条走？那内容部分怎么弄？你直接在内容部分设定滚动条不就完了嘛<style type="text/css">
.Box width:900px; margin:0 auto;
.Header height:60px; background-color:red;
.Content height:700px; overflow:auto; background-color:#00FFCC;
</style>
</head>
<body>
<div class="Box">
<div class="Header"></div>
<div class="Content">
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
<p>s</p>
<p>a</p>
</div>
</div>
</body>
</html> 参考技术C 楼上那个办法就行了，把你那个div的css加上这个属性就ok了，只是IE低版本不支持，不过有办法可以解决兼容问题，百度：position:fixed;兼容 参考技术D 利用position:fixed;标记就可以了。具体的问题可以上网查查。
推荐一个不错的论坛http://bbs.blueidea.com/forum.php
希望采纳
html中 div怎么固定到底部
想要将html中 div怎么固定到底部很简单，只需要给这个div元素的position属性设置为fixed，并且bottom属性设置为0px即可。具体核心代码如下
<div id="" style="position: fixed;bottom: 0px;">
固定到底部
</div>
运行效果如下图：
这里使用的是行内式，也可以使用行外式和外部式都可以达到效果。
扩展资料：
HTML的编辑方式：
1、基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。
2、半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。
3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）；Microsoft Visual Studio（出品公司：微软）。
参考资料：百度百科——HTML
参考技术A <style>.footer left:0px; position:fixed; width:100%; height:100px; background-color:#f00; color:#FFF; text-align:center; font-size:18px; font-weight:bold; bottom:0px;
</style>
<div class="footer">
这里是固定到底部
</div>
把这个些复制到一个html文件里面放入body内，然后打开浏览器看一下效果；
已解决，如果还有其他疑问的话请继续追问我； 参考技术B
设置 css 样式如下：
height: 50px;
position: fixed;
bottom: 0;
具体一个例子如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>demo</title>
<style type="text/css">
body
margin: 0;
#main
height: 1000px;
#footer
background: #00A2EA;
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
</style>
</head>
<body>
<div id="main"></div>
<div id="footer">
</div>
</body>
</html>本回答被提问者和网友采纳
以上是关于想做一个页面头部div固定不动的效果的主要内容，如果未能解决你的问题，请参考以下文章