html 里面 div 滚动条保持在底部 及 div 位置固定。
两个div的要求都写在div自身里面了。只要保留两个div要求，其他可以自行发挥。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Stric...
两个 div 的要求都写在 div 自身里面了。只要保留两个 div 要求，其他可以自行发挥。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function send()
{
var div = document.getElementById("wrapper");
div.innerHTML += (new Date() + "<br />" ) ;
div.scrollTop = div.scrollHeight;
}
</script>
</head>
<body>
<div style="position:fixed;border:#00FF00 solid 2px">位置固定在顶部，不会随着页面滚动而滚动</div>
<div id="wrapper" style="position:absolute;top:40px;border:#CC3333 solid 2px" onclick="send()">
大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div 重叠！<br /></div>
</body>
</html> 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function send()
{
var div = document.getElementById("wrapper");
div.innerHTML += (new Date() + "<br />" ) ;
div.scrollTop = div.scrollHeight;
}
</script>
</head>
<body>
<div style="position:fixed;border:#00FF00 solid 2px">位置固定在顶部，不会随着页面滚动而滚动</div>
<div id="wrapper" style="position:absolute;top:40px;border:#CC3333 solid 2px" onclick="send()">
大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div 重叠！<br /></div>
</body>
</html> 展开
4个回答
展开全部
1、首先在点中鼠标点击打开HBuilde软件，点击新建一个Web项目。
2、然后输入项目名，然后点击完成按钮，如图所示。
3、接着输入代码，如下图所示。
4、然后点击运行--->浏览器运行，如图所示。
5、可以看到到运行结果 ，然后点击滚动条最下面，点击之后，可以看到滚动条会滚动到指定的位置，如图所示。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1、新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签创建一个模块，用于测试。
3、在test.html文件内，给div添加一个class属性，用于设置其样式。
4、在css标签内，通过class设置div的样式，定义其宽度为200px，高度为200px，背景颜色为红色。
5、在css标签内，再使用position属性设置div为绝对定位，距离底部为0px，距离左边缘为0px。
6、在浏览器打开test.html文件，查看实现的效果。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<style type="text/css">
html,body{ overflow:hidden; margin:0; padding:0;}
</style>
<script type="text/javascript">
$(function(){
var brsH,scrH,topH,topT,wrapperH,wrapperT;
var brs = $(window);
var top = $("#top");
var wrapper = $("#wrapper");
function pos(){
brsH = brs.height();
scrH = brs.scrollTop();
topH = top.height();
topT = top.offset({top:scrH});
wrapperH = wrapper.height(brsH-topH);
wrapperT = wrapper.offset({top:scrH+topH});
}
pos();
brs.bind("resize scroll",function(){
pos();
});
})
</script>
</head>
<body>
<div id="top" style="border:#00FF00 solid 2px; height:100px;">位置固定在顶部，不会随着页面滚动而滚动</div>
<div id="wrapper" style="border:#CC3333 solid 2px; overflow:auto" onclick="send()">
大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div 重叠！<br />
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
</div>
</body>
</html>
看是不是你要的效果，下载个jquery框架：jquery-1.6.1.min.js，放到对应路径
<style type="text/css">
html,body{ overflow:hidden; margin:0; padding:0;}
</style>
<script type="text/javascript">
$(function(){
var brsH,scrH,topH,topT,wrapperH,wrapperT;
var brs = $(window);
var top = $("#top");
var wrapper = $("#wrapper");
function pos(){
brsH = brs.height();
scrH = brs.scrollTop();
topH = top.height();
topT = top.offset({top:scrH});
wrapperH = wrapper.height(brsH-topH);
wrapperT = wrapper.offset({top:scrH+topH});
}
pos();
brs.bind("resize scroll",function(){
pos();
});
})
</script>
</head>
<body>
<div id="top" style="border:#00FF00 solid 2px; height:100px;">位置固定在顶部，不会随着页面滚动而滚动</div>
<div id="wrapper" style="border:#CC3333 solid 2px; overflow:auto" onclick="send()">
大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div 重叠！<br />
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
<p>大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div </p>
</div>
</body>
</html>
看是不是你要的效果，下载个jquery框架：jquery-1.6.1.min.js，放到对应路径
更多追问追答
追问
能不能然 wrapper 的滚动条保持在底部？谢谢
追答
保持在底部？？？不是很明白
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
两个 div 的要求都写在 div 自身里面了。只要保留两个 div 要求，其他可以自行发挥。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function send()
{
var div = document.getElementById("wrapper");
div.innerHTML += (new Date() + "<br />" ) ;
div.scrollTop = div.scrollHeight;
}
</script>
</head>
<body>
<div style="position:fixed;border:#00FF00 solid 2px">位置固定在顶部，不会随着页面滚动而滚动</div>
<div id="wrapper" style="position:absolute;top:40px;border:#CC3333 solid 2px" onclick="send()">
大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div 重叠！<br /></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function send()
{
var div = document.getElementById("wrapper");
div.innerHTML += (new Date() + "<br />" ) ;
div.scrollTop = div.scrollHeight;
}
</script>
</head>
<body>
<div style="position:fixed;border:#00FF00 solid 2px">位置固定在顶部，不会随着页面滚动而滚动</div>
<div id="wrapper" style="position:absolute;top:40px;border:#CC3333 solid 2px" onclick="send()">
大小为占剩余的全部页面。内容超过时显示条。<br />滚动条保持在底部.滚动时不能和上一个 div 重叠！<br /></div>
</body>
</html>
追问
不要浪费我的感情！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
