作者：zishu
http://www.zishu.cn/blogview.asp?logID=711&cateID=3
所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；
测了一下，还可以，在IE6、IE7、FIREOFX等都没有问题！ 窗口缩小时也没有问题！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>http://www.zishu.cn</title>
<style>
*{ margin:0; padding:0}
#info{background:#33CCFF}
#bottom{background:#FFCC00;width:100%;}
</style>
</head>
<body>
<div id="info">
<br />2<br />2<br />2<br /><br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br /><br />22<br />2<br />2<br /><br />2<br />20000</div>
<div id="bottom">bottom</div>
<script language="JavaScript" type="text/javascript">
function test(){
var infoHeight = document.getElementById("info").scrollHeight;
var bottomHeight = document.getElementById("bottom").scrollHeight;
var allHeight = document.documentElement.clientHeight;
var bottom = document.getElementById("bottom");
if((infoHeight + bottomHeight) < allHeight){
bottom.style.position = "absolute";
bottom.style.bottom = "0";
}else{
bottom.style.position = "";
bottom.style.bottom = "";
}
setTimeout(function(){test();},10);
}
test();
</script>
</body>
</html>
分享到：
相关推荐
标题中的"js让一行页脚保持在底部"指的是在网页设计中实现一个固定在页面底部的单行页脚，无论用户滚动页面到哪个位置，页脚始终保持在屏幕底部。这通常被称为"粘性页脚"或者"固定页脚"效果。这种效果可以提供良好的...
在网页设计中，一个常见的需求是让页脚始终固定在页面底部，无论页面内容多少，都能保持在视口的最下方。这就是所谓的“紧贴底部的页脚”或“CSS绝对底部”布局。这种布局方式可以提供良好的用户体验，特别是在内容...
在网站设计中，底部区域（通常称为页脚）往往被忽视，但它对于提供网站导航、版权信息、联系详情等重要元素起着至关重要的作用。"分享一款网站炫酷底部美化代码.zip"是一个压缩包，其中包含了一套用于美化网页底部的...
在内容不超过一屏的情况下，当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。 当内容多出一屏时，他显示在网页的最下边，而不是窗口的最下边；测试了一下，还可以，在IE6、IE7、FF等都没有问题！...
6.保持页脚在页面底部，而非紧接正文内容 7.保持原文CSS样式 8.便捷自定义设置工具条 9.调用、语法简单，便捷 更过详细技术难点、解决思路、实现过程讲解，及细致的代码注释，本人博文有详细介绍 ...
如果你不希望报表有眉行（通常是包含列名的一行），可以选择删除它，以保持页脚的简洁。 最后，保存并运行报表，你将会看到一个带有重复页脚的完美报表，每个页脚中都包含了每页所需显示的内容。这个方法经过测试，...
这种方法利用了负的margin值，使得footer相对于视口（viewport）保持在底部，而不是页面内容的底部。当内容超过屏幕高度时，footer会随滚动条下移，但始终保持在视口底部。 ```css html, body { height: 100%; } ...
要使页脚始终保持在页面底部，我们可以采用几种不同的CSS方法： 1. **固定定位（Fixed Positioning）** 使用CSS的`position: fixed;`属性，可以将页脚固定在屏幕的底部。但是，这种方法的缺点是页脚会覆盖页面的...
在网页设计中，"居底部显示"通常是指将某些元素如页脚（footer）固定在浏览器窗口的底部，无论页面内容如何滚动，这部分始终保持在视口的底部。这种布局方式在现代网页设计中非常常见，它能提供一致的用户体验，让...
这将使得控件底部出现一个空白的页脚行，用于显示计算或自定义内容。 3. **显示统计信息** 为了在页脚中显示列的统计信息，可以使用`FooterText`属性或者`FooterFormat`属性。`FooterText`直接设定固定文本，而`...
当我们需要在GridView的最后一行显示总计或汇总信息时，这通常涉及到数据绑定、自定义列以及事件处理等方面的知识点。以下是对“winform gridview最下面的合计行”这一主题的详细解释。 1. **数据绑定**： - ...
通常，我们可以设置`position: fixed`，使元素相对于浏览器窗口固定，无论页面滚动如何，该元素都会保持在屏幕的特定位置。对于页脚导航，我们可能会设置其`bottom: 0`以使其始终贴在页面底部，并可能通过`left`或`...
在网页设计中，保持元素的布局一致性至关重要，尤其是页脚底部对齐问题。"页脚底部对齐"是一个常见的需求，特别是在响应式设计中，它确保无论内容区域的高度如何，页脚始终能固定在页面底部。这个技术通常被称为...
在文本编辑器中找到相关代码行后，直接修改即可。如果是使用报表设计器，则可以直接在界面中进行可视化修改，更加直观方便。 例如，在`SLJED.REP`文件中，假设需要将页脚名称从“总账”改为“新总账”，那么在...
标题中的“如何伪造“冻结” datagridview的最后一行”指的是在Windows Forms应用程序中，使用DataGridView控件时，如何实现一种视觉效果，使得最后一行看起来像是固定在屏幕底部，即使在数据滚动时也始终保持可见。...
【CSS固定页脚】在移动Web页面设计中，固定页脚是一种常见的布局需求，它确保不论用户滚动页面至何处，页脚始终可见，保持在屏幕底部。这在单页应用（SPA）中尤其重要，因为SPA通常需要提供一致的导航体验，而页脚...
这一步可能会移除页面底部的页脚信息。 - 如果页脚是作为水印存在，可以尝试在“文档”->“水印”中选择“删除”。 - 如果上述方法无效，可以使用“高级工具”下的“Touchup对象工具”，选中页脚部分并按Delete键...
}` 这个元素是用来推挤内容区，使其达到足够的高度以撑开页面，让页脚在内容不足时依然能保持在底部。 4. `.footer` 定义了页脚的样式，包括边框、颜色、内边距和背景色。 在HTML结构方面，通常包含以下几个部分：...
在网页设计中，保持网页底部始终固定在浏览器窗口的最下方，无论用户滚动页面到何处，都能看到这一区域，这通常被称为“固定底部”或“固定尾部”设计。这种设计方式常见于网站的页脚（footer），因为它能确保用户在...