定位页面高度的几种方法

 1、Iframe自适应高度

备注：当页面通过iframe引入加载时，又无法给固定的高度控制页面。可以通过获取子页面的高度来自定义控制iframe的高度。页面初次加载时调取这个方法，给页面一个iframe高度。这样控制页面能百分百展示。

iframeHeight: function () {

var ifm = parent.document.getElementById('iframepage'), // iframe的高度

subWeb = document.frames ? document.frames['iframepage'].document : ifm.contentDocument, // 子页面的高度

winHeight = window.screen.height - 154;// 窗体的高度

if (ifm != null && subWeb != null) {

var height = $(subWeb.body).height();

height += 60;

var ele = $(window.parent.document).find('.contents,#iframepage');

ele.css('height', height);

height > 622 ? ele.css('height', height) : ele.css('height', winHeight);

}
//补充
//js获取iframe内部div的元素方法：
//document.getElementById('iframe的id').contentWindow.document.getElementById('iframe里面要获取的元素');

}

2、鼠标滚动定位导航栏

<script type="text/javascript">
	var oNav = $('#LoutiNav');//导航壳
	var aNav = oNav.find('li');//导航
	var aDiv = $('#main .louceng');//楼层
	var oTop = $('#goTop');
	//回到顶部
	$(window).scroll(function () {
		var winH = $(window).height();//可视窗口高度
		var iTop = $(window).scrollTop();//鼠标滚动的距离

		if (iTop >= $('#header').height()) {
			oNav.fadeIn();
			oTop.fadeIn();
			//鼠标滑动式改变	
			aDiv.each(function () {
				if (winH + iTop - $(this).offset().top > winH / 2) {
					aNav.removeClass('active');
					aNav.eq($(this).index()).addClass('active');
				}
			})
		} else {
			oNav.fadeOut();
			oTop.fadeOut();
		}
	})
	//点击top回到顶部
	oTop.click(function () {
		$('body,html').animate({ "scrollTop": 0 }, 500)
	})
	//点击回到当前楼层
	aNav.click(function () {
		var t = aDiv.eq($(this).index()).offset().top;
		$('body,html').animate({ "scrollTop": t }, 500);
		$(this).addClass('active').siblings().removeClass('active');
	});
</script>

3、筛选条件展开或收缩

//展开收缩
        openClose: function () {
            /** 
             * [.sIcon] 表示展开/收缩的按钮；
             * [.contents] 包裹iframe的div
             * [#iframepage] <iframe>标签id
             * [.scroll-wrap] 列表表格数据div
             * [#fkMethod] 展开的内容
             * [.visibilityTR] 更多选项
             * [#noText] 收起的按钮
            */
            // 获取引入的iframe的高度和包裹iframe的div高度
            var ele = $(window.parent.document).find('.contents,#iframepage');
            // 判断是展开还是收缩
            if ($('.sIcon').hasClass('down')) {
                $(".checkRadio").show('slow');
                // 列表向下偏移的位置
                setTimeout(() => {
                    let height = $('.scroll-wrap').offset().top - document.documentElement.scrollTop;
                    $('.bottom-arrow').css('top', height);
                    utils.iframeHeight() //重新定义页面高度
                }, 700)
                $('.sIcon').css('background', 'url(' + CONTEXTPATH + '/static/common/img/apps/fraud-warn/zk.png) no-repeat');
                ele.css('height', ele.height() + 260);
                $('.sIcon').removeClass('down');
                $('.sIcon').addClass('up');
                // 控制展开的内容行高
                setTimeout(() => {
                    $("#fkMethod").prev('label').css('line-height', $("#fkMethod").height() - 27 + 'px')
                }, 700);
            } else {
                $(".checkRadio").hide('slow');
                $('.sIcon').css('background', 'url(' + CONTEXTPATH + '/static/common/img/apps/fraud-warn/ss.png) no-repeat');
                ele.css('height', ele.height() - 240);
                $('.sIcon').removeClass('up');
                $('.sIcon').addClass('down');
                noCheck(); //添加额外元素高度
            }
        },
        // 更多选项
        noCheck: function () {
            $(".visibilityTR").hide('slow');
            setTimeout(() => {
                let height = $('.scroll-wrap').offset().top - document.documentElement.scrollTop;
                $('.bottom-arrow').css('top', height);
                utils.iframeHeight()
            }, 700)
           //收起的按钮
            $('#noText').css('display', 'none');
           
        },