iframe自适应高度的方法有哪些（实现iframe的100%高度和宽度）
432次浏览
发布时间：2024-05-24 23:01:10
说明
iframe元素
创建包含另外一个文档的内联框架（即行内框架）。
CSS3规范，视口单位主要包括以下4个：
1、vw : 1vw 等于视口宽度的1%；
2、vh : 1vh 等于视口高度的1%；
3、vmin : 选取vw和vh中最小的那个；
4、vmax : 选取vw和vh中最大的那个；
100%高度和宽度：
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #fff;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}参考代码
HTML中嵌入iframe
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>XXXX调查表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body html{
margin:0;
padding:0;
}
#app{
margin: 0 auto;
width: 600px;
}
iframe {
display: block;
background: #FFF;
border: none;
width:100vw; /* Viewport-relative units */
height:100vh;
width:100%;
}
</style>
</head>
<body>
<div id="app">
<div>
<button type="button"><span>返回</span></button>
<button type="button" onclick="print()"><span>打印</span></button>
</div>
<h2>公司部门调查表</h2>
<iframe src="C:/Users/dd/Desktop/003.html" scrolling="no"></iframe>
</div>
</html>被嵌入页面：
<!doctype html>
<html lang="zh-CN">
<head>
<title>XXXX调查表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://static1.haohuo.net/uploads/images/2180754/2180754_antd.variable.css" rel="stylesheet">
<!--
https://static1.haohuo.net/uploads/images/2180754/2180754_forms.html
-->
</head>
<body>
<div id="app">
<p><h2>公司部门调查表</h2></p>
<form v-model="form" v-on:submit.prevent="saved()" >
<fieldset>
<legend>职员信息</legend>
<ol>
<li>
<label>姓名: </label>
<input v-model="form.name" type="text" name="name" autofocus/>
</li>
<li>
<label>年龄: </label>
<input v-model="form.age" type="number" name="age" />
</li>
<li>
<label>性别:</label>
<input v-model="form.sex" type="radio" name="sex" value="未知" />未知
<input v-model="form.sex" type="radio" name="sex" value="男" />男
<input v-model="form.sex" type="radio" name="sex" value="女" />女
</li>
<li>
<label>籍贯：</label>
<select v-model="form.nativePlace">
<optgroup label="山西省">
<option>太原市</option>
</optgroup>
<optgroup label="北京">
<option>北京市</option>
</optgroup>
</select>
</li>
<li>
<label>爱好:</label>
<input v-model='form.hobbys' type="checkbox" name="hobby" value="爬山" />爬山
<input v-model='form.hobbys' type="checkbox" name="hobby" value="涉水" />涉水
<input v-model='form.hobbys' type="checkbox" name="hobby" value="下棋" />下棋
<input v-model='form.hobbys' type="checkbox" name="hobby" value="游戏" />游戏
</li>
<li>
<label>所在部门:</label>
<select v-model="form.department">
<option v-for="(item, index) in form.departments" :key="item">{{item}}</option>
</select>
</li>
<li>
<label>职位:</label>
<input v-model="form.title" type="text" name="title" />
</li>
<li>
<label>提交建议：</label>
<input v-model="form.advise" type="file" name="form.advise" />
</li>
<li>
<label>填表日期:</label>
<input v-model="form.fillDate" type="date" name="fillDate">
</li>
</ol>
</fieldset>
<fieldset>
<legend>反馈意见</legend>
<ol>
<li>
<label>你对公司目前的发展表示：</label>
<input v-model="form.development" type="radio" name="development" value="满意" /> 满意
<input v-model="form.development" type="radio" name="development" value="不满意" /> 不满意
<input v-model="form.development" type="radio" name="development" value="一般" /> 一般
</li>
<li>
<label>你对公司的任职岗位表示：</label>
<input v-model="form.jobIdentification" type="radio" name="jobIdentification" value="认同" /> 认同
<input v-model="form.jobIdentification" type="radio" name="jobIdentification" value="不认同" /> 不认同
<input v-model="form.jobIdentification" type="radio" name="jobIdentification" value="一般" /> 一般
</li>
<li>
<label>你对公司的期望: </label> <br />
<textarea v-model="form.expect" rows="4" name="neme" cols="50"></textarea>
</li>
</ol>
</fieldset>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</div>
<script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var day = now.getDay();
//
var app = new Vue({
el: '#app',
data() {
return {
form: {
name:"孔子",
age: 2000,
sex: "男",
nativePlace: "北京市",
hobbys: ["爬山","下棋"],
departments: ["财务部","法务部","加盟部","商务部","技术部"],
department: "技术部",
title: "工程师",
fillDate: year + "-" + month + "-" + day,
development: "一般",
jobIdentification: "不认同",
expect: "一切都美好~"
}
}
},
methods:{
saved(){
alert(JSON.stringify(this.form));
axios.post('http://192.168.1.116:8080/data/post',this.form,{
headers: { "token": "token123" }
}).then(res => {
console.log("result", JSON.stringify(res.data));
})
}
}
});
</script>
</html>VUE中嵌入：
<template>
<div id="app">
<div>
<button type="button"><span>返回</span></button>
<button type="button" onclick="print()"><span>打印</span></button>
</div>
<h2>公司部门调查表</h2>
<iframe src="C:/Users/dd/Desktop/003.html"></iframe>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
body{
margin:0;
padding:0;
}
#app {
margin:0;
padding:0;
overflow: hidden;
}
iframe {
display: block;
background: #FFF;
border: none;
height: 100vh;
width: 100vw;
}
</style>相关文章
洋葱炒蛋怎么做好吃（掌握顺序很重要）
2024-06-17 07:00:45
邢台美食推荐哪些呢（邢台市这几个好吃到流哈喇子的美食）
2024-06-17 06:50:52
什么是环保材料（教你如何识别环保材料 ）
2024-06-17 06:40:44
it外包公司的做法（IT外包公司的服务流程是怎样的）
2024-06-17 06:30:42
长城的长度约是多少千米（长城是谁建造的？）
2024-06-17 06:20:42
积分兑换话费怎么操作（电信号码积分怎么兑换话费）
2024-06-17 06:10:45