JQuery获取文章内容页自适应高度，优化界面外观

时间：2017-06-13

今天这里分享一个简单的方法，来达到文章内容页高度自适应的目的！

在文章站中，应该不少出现这样的一种情况，一篇文章除了标题，文章内容特别少，而我们再写入CSS样式的时候，不会去定死它的高度；

那么，不定死高度会出现什么情况呢？文章特别短的时候，整个见面会有种“单边重”的感觉！展示文章内容的区域空白会有一大片留着，影响到了用户体验度。

那现在通过一个简单的JQ特效实现，文章高度低于指定像素后，自动的给文章加上CSS高度样式定死；

以下是HTML代码：

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.p{width:300px; border:1px #CCCCCC solid; padding:6px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src=""></script>
</head>
     
<body>
    <div class="p">
        有些要求严格管理进出的门禁系统,会用另一个读卡器取代出门按钮,即双向读卡门禁系统,这样不但可以管理进入的人的权限,也可以管理外出人员的权限,并记录其进出记录.安全级别更高.也有的门禁系统读卡器是带密码键盘功能,进入时不但要求卡符合通过身份,而且必须输入相关密码,这样可以保证即使卡片被人拣到都无法进入.
生物识别的门禁系统指用指纹仪虹膜设备掌型仪等取代读卡器的门禁系统.
通讯集线器有两个作用,加大控制器到电脑的传输距离,和将众多的控制单元进行联网有些要求严格管理进出的门禁系统,会用另一个读卡器取代出门按钮,即双向读卡门禁系统,这样不但可以管理进入的人的权限,也可以管理外出人员的权限,并记录其进出记录.安全级别更高.也有的门禁系统读卡器是带密码键盘功能,进入时不但要求卡符合通过身份,而且必须输入相关密码,这样可以保证即使卡片被人拣到都无法进入.
生物识别的门禁系统指用指纹仪虹膜设备掌型仪等取代读卡器的门禁系统.
通讯集线器有两个作用,加大控制器到电脑的传输距离,和将众多的控制单元进行联网
    </div>
</body>
</html>

JQ代码：

<script type="text/javascript">
$(document).ready(function(){
    var h = $(".p").height();//获取高度并且赋值给变量H
    if(h>300){//判断获取到的值是否小于指定高度
        $('.p').css('height','100px');
        $('.p').css('overflow','hidden');
    }
});
</script>

效果：

JQuery获取文章内容页自适应高度，优化界面外观-逐风的技术之路

未处理的效果：

JQuery获取文章内容页自适应高度，优化界面外观-逐风的技术之路

上一条：如何用js得到当前页面的url信息方法(JS获取当前网址信息) 下一条:页面中加载的内容乱了怎样才能不影响原来的布局

JQuery获取文章内容页自适应高度，优化界面外观

相关文章

最新文章