gpt4 book ai didi

html - 侧面有两个固定的 iframe (或 div )

转载 作者:行者123 更新时间:2023-11-28 01:24:15 28 4
gpt4 key购买 nike

我在side1.html下面看不到side2.html

page.html 应该滚动,side1.htmlside2.html 应该始终可见,side1 在 side2 之上。

页面.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 之上

最佳答案

固定位置需要定位元素top/right/down/left 来引用它的偏移量。 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>

关于html - 侧面有两个固定的 iframe (或 div ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32755427/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com