JQuery获取文章内容页自适应高度

作者:人气:来源:2015-03-23

广告载入中...

今天这里分享一个简单的小方法,来达到文章内容页高度自适应的目的!优化界面美观度,增强用户体验度。

在文章站中,应该不少出现这样的一种情况,一篇文章除了标题,文章内容特别少,而我们再写入CSS样式的时候,不会去定死它的高度;那么,不定死高 度会出现什么情况呢?文章特别短的时候,整个见面会有种“单边重”的感觉!展示文章内容的区域空白会有一大片留着,影响到了用户体验度。

现在通过一个简单的jQuery特效实现,文章高度低于指定像素后,自动的给文章加上CSS样式固定高度!

完整的HTML代码如下:

<!DOCTYPE>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        body { font-size: 12px; line-height:25px; color:#808080;}
        .demo { width: 300px; border: 1px #CCCCCC solid; padding: 6px; }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var h = $('.demo').height();//获取.demo高度并赋值给h
            if (h > 300) {//判断获取到的值是否小于指定高度
                $('.demo').css('height', '100px');
                $('.demo').css('overflow','hidden');
            }
        });
    </script>
</head>
<body>
    <div class="demo">
        一提到“数据”,可能经常会想到“数字”、“图表”、“模型”、“方程”等容易让人怯步的词语。其实“数据”的真正意义,是躲在背后的那些“人”。
        在营销学中,市场的根本在于需求,需求由人而生。因此,我们不应该就数字而数字,就算法而算法,应该自始自终关注“人”,市场研究则更是如此。
        有人也许会说,“人”可不好说,有时说谎,有时偏私,真真假假。但,不是有种更简单的想法吗?我们自己本身就是“人”。作为市场研究者,大可不必将自己完完全全剥离在“人”这个概念以外,顶着看似客观的立场,作困兽之斗。
        这个时候,也许有人会质疑,如果加入更多自己的想法,你的研究还客观吗?
        没错,作为市场研究者,必须客观地看待事实,呈现事实。但事实是什么,如果总把自己孤立在另一边,恐怕这个所谓的事实,也不过是披着云雾的谜团。
        在这里,我必须强调,事实的重要性,正是为了看清事实,我们必须“有方法”地在某些情况下,将自己看成是同一边的“人”,某些情况下,将自己独立为另一边的旁观者。
    </div>
</body>
</html>

未处理前的效果:

处理后的效果:

方法虽然简单但却很实用,或许你觉得min-height也可以实现这样的效果,但min-height存在浏览器兼容的问题,本文提供的方法兼容所有浏览器!

继续阅读:页面特效

分享吧:

手机移动