当前位置:首页 > 开发 > 互联网 > 正文

DIV底部自适应

发表于: 2013-03-17   作者:dcj3sjt126com   来源:转载   浏览:
摘要: <!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&q
<!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=gb2312" />
<title>DIV自适应底部</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
	res();
});
window.onresize = res;
function res(){
	var one = $(window).height();
	var gao = $(".in").height();
	if (one>=gao){
		$(".end").css({'position':"absolute"})
		}else{
		$(".end").css({'position':"relative"})
	}
}
</script>
<style type="text/css">
* {margin: 0px;padding: 0px;list-style-type: none;}
html.body {height: 100%;width: 100%;}
.top {background-color: #F00;height: 100px;width: 100%;}
.in {float: left;height: auto;width: 100%;background-color: #00F;color:#FFF;}
.end {background-color: #F00;width: 100%;left: 0px;bottom: 0px;float: left;height: 100px;}
</style>

</head>
<div class="top">top <span class="yi"></span>  | <span class="er"></span></div>
<div class="in">
<p>说明:</p>
1、获取用户浏览器当前BODY高度<br />
2、判断标签 ”in“ 的高度是否大于 body 的高度<br />
2.1、当用户的浏览器窗口 BODY 高度大于等于标签”in“的时候!标签”end“的属性等于:position:"absolute"【绝对定位】<br />
2.2、当用用户浏览器 BODY 高度小于标签 ”in“的高度时!标签”end“的属性等于:position:"none”【取消绝对定位】<br />
<br /><p><strong>特别说明:在用户不刷新页面的情况下实现以上效果</strong></p>
<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
</div>
<div class="end">end</div>
</body>
</html>

 

DIV底部自适应

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
网上找了很多例子,不不可行,之后在csdn帖子中找到了,记录一下。 一定要在三层div中设置 style="p
关于div高度的自适应,一直是个让人头疼的问题,整理了一下以前总结的方法,仅表示我也玩过。 html
在实际开发中,我们遇到一种情况,需要将表格的底部放一个分页的标签,这样使得布局如下 实际表格主
  有时候我们会有这样的需求,如图,aside是导航或者某些链接,右边的main是显示重要的内容,左边
//左右div自适应高处理 var hl = $(".f_left").outerHeight(); //获取左侧#left层的高度 var hr = $
很多的Web designer在刚接触W3C标准的时候,都遇到过高度自适应的问题。因为div等对象的height:100%
看下面的代码: <div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;h
看下面的代码: <div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;h
看下面的代码: <div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;h
在WEB开发过程中,有些需求要求DIV的高度随着浏览器窗口的改变而改变。 这里我就列举两种情况: ①
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号