iframe jquery自适应高度(二)

最新推荐文章于 2024-11-06 11:10:21 发布

我是高手高手高高手

最新推荐文章于 2024-11-06 11:10:21 发布

阅读量566

点赞数

分类专栏：保利威视 jQuery JS技巧网页技巧 HTML/CSS

JS技巧同时被 3 个专栏收录

246 篇文章

订阅专栏

网页技巧

143 篇文章

订阅专栏

jQuery

129 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的固定头部布局，并通过jQuery进行页面元素的显示与隐藏操作，同时调整了iframe的高度以适应不同分辨率的屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css">
	<style type="text/css">
		#header{
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 80px;
			background: #000;
			z-index: 10;
			background: rgba(0,0,0,.8);
			padding-right: 10%;
			padding-left: 10%;
		}
		#header button{
			color: #fff;
			opacity: 1;	
			line-height: 80px;
		}

		body{
			margin: 0;
			padding: 0
		}
		button{
			outline: none
		}
		.fanhui{
			color: #fff;
			font-size: 18px;
			display: inline-block;
			line-height: 80px;
		}
		.dakai{
			position: fixed;
			right: 10%;
			top: 30px;
			display: none;
		}
	</style>
</head>
<body>
	<div id="header">
		<a href="" class="fanhui">返回</a>
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	</div>
	<button class="dakai btn btn-primary glyphicon glyphicon-th-list"></button>
	<iframe src="http://demo.gensee.com/webcast/site/entry/join-39880c94a99b4856bfa82008efa8a9aa?nickName=tset" id="myiframe" scrolling="no" onload="changeFrameHeight()" frameborder="0" width="100%"></iframe>
</body>
<script type="text/javascript">
		var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
		function changeFrameHeight(){
	    var ifm= document.getElementById("myiframe"); 
		    ifm.height=clientHeight+'px';
		}
		window.onresize=function(){  
		     changeFrameHeight();  
		}
		$("#header button").click(function(){
			$(this).parent().slideUp();
			$(".dakai").css("display","block");
		});
		$(".dakai").click(function(){
			$("#header").slideDown();
			$(".dakai").css("display","none");
		})
</script>
</html>