我想使用 iFrame 并排显示网页的两个版本,但我在大小和位置属性方面遇到了一些问题。 (左边那个虽然我设置成100,但是好像显示的高度偏小了)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Split</title>
</head>
<body>
<iframe src="link_v1" frameborder="0" scrolling="yes"
style="overflow: hidden; height: 100%;
width: 49%; float: left; " height="100%" width="49%"
align="left">
</iframe>
<iframe src="link_v2" frameborder="0" scrolling="yes"
style="overflow: hidden; height: 100%;
position: absolute;
width: 49%; " height="100%" width="49%"
align="right">
</iframe>
</body>
</html>
最佳答案
你的 html 的大小就是你的第一个 iframe 的大小
这是因为你在第二个 iframe
中使用了 position: absolute
它在 html 和 body 之外,因此它占据了整个高度而不是 html 高度
看看下面的codepen
<iframe src="link_v1" frameborder="0" scrolling="yes"
style="height: 100%;
width: 49%; float: left; " height="100%" width="49%"
align="left">
</iframe>
<iframe src="link_v2" frameborder="0" scrolling="yes"
style="overflow: hidden; height: 100%;
width: 49%; " height="100%" width="49%"
align="right">
</iframe>
这样它们都将在 html
和 body
中
同时将 html
和 body
的高度设置为 100%
使两个 iframe 都占据全高
html,body{
width: 100%;
height: 100%;
}
看看我的codepen http://codepen.io/war_lock1221/pen/XMzXWb
关于html - 并排显示两个 iFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43640053/