Question

我在side2.html

下方看不到side1.html

page.html应滚动，side1.html和side2.html应始终可见，side1在side2上方。

page.html

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
    <style type="text/css">
        <!--
        body.container {
            width: 100%;
            height: auto;
        }
        .maintext {
            float: right;
            width: calc(100% - 210px);
        }
        iframe.side1 {
            position: fixed;
            float: left;
            height: 600px;
            width: 200px;
        }
        iframe.side2 {
            position: fixed;
            float: left;
            top: 300px;
            height: 300px;
            width: 200px;
        }
        -->
    </style>
</head>
<body>

<a name="topw" id="toppage"></a>

<div class="container">
    <div class="maintext">
        <a name="dic"></a><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dict</h3><br/>
    </div>
    <iframe class="side1" src="side1.html" frameborder="0" />
    <iframe class="side2" src="side2.html" frameborder="0" />
</div>

</body>
</html>

side1.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a class="menu" target="_parent" href="page.html#dic" title="title"       > title </a>

</body>

</html>

side2.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a target="_blank" href="http://www.ubuntu.com" title="org">.org</a>
</body>

</html>

或者我可以使用div解决问题，而不使用iframe。像here这样的东西。但我不能使它工作：side1在side2之上

Answer 1

固定位置需要定位元素上/下/下/左来引用它的偏移量。 float不适用于固定元素。

我还改变了元素的高度和偏移量，这样无论它们的大小如何，它们都会填满用户屏幕。

同样@Sim指出iframe现在是自动关闭的，并且应该有一个合适的结束标记。

body.container {
  width:100%;
}
.maintext {
  min-height:1080px; /*to simulate content*/
  width:100%;
  box-sizing:border-box;
  padding-left:200px;
  background:#ddd;
}
.side1,
.side2{
  position: fixed;
  left:0; 
  width:200px;
}
iframe.side1 {
  top:0; 
  height:70%;
}
iframe.side2 {
  top:70%; 
  height:30%;
}

<div class="container">
  <div class="maintext">
    <a name="dic"></a><h3>Middle Div</h3><br/>
  </div>
  <iframe class="side1" src="side1.html" frameborder="0"></iframe>
  <iframe class="side2" src="side2.html" frameborder="0"></iframe>
</div>

Answer 2

你应该用</iframe>关闭你的iframe ，因为它们不是空元素（用于处理不支持<iframe>的浏览器，您可以在iframe的开头和结束标记之间添加文字：https://www.w3.org/wiki/HTML/Elements/iframe
使用top和left 在元素为position: fixed

我修改了你的代码（见评论）：

<!DOCTYPE html>
<html>
<head>
    <title>page</title>

    <style type="text/css">
        body.container {
            width: 100%;
        }
        .maintext {
            float: right;
            width: calc(100% - 210px);
        }
        iframe.side1 {
            position: fixed;
            left: 0; /* use absolute positions when position fixed, not float */
            top: 0;
            height: 300px; /* 300px is enough, else it is behind your second iframe*/
            width: 200px;
        }
        iframe.side2 {
            position: fixed;
            left: 0;
            top: 300px;
            height: 300px;
            width: 200px;
        }
    </style>
</head>
<body>

<a name="topw" id="toppage"></a>

<div class="container">
    <div class="maintext">
        <a name="dic"></a><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dict</h3><br/>
    </div>

    <!-- always add a closing tag to your iframes -->
    <iframe class="side1" src="side1.html" frameborder="0" ></iframe>
    <iframe class="side2" src="side2.html" frameborder="0" ></iframe>

</div>

</body>
</html>

我希望能解决你的问题...

侧面有两个固定的iframe（或div）

2 个答案: