如果在潜水容器内，作为窗口模式
如果在潜水容器内，作为窗口模式
提问于 2018-06-23 13:01:33
我创建css/jquery调整大小窗口，在css中包含标题、容器和页脚三个部分，在此窗口的容器内插入iframe，所有窗口都可以从右下角调整大小。
这个问题是下一个问题：
如果页脚在相对位置使用div，问题是容器没有同时展开，当调整页脚大小时看不到或减小了他的高度。
另一侧如果使用绝对位置作为页脚，则从iframe滚动条隐藏在此div下。
我尝试了CSS的各种组合，但没有找到任何解决方案。
我为人们创建了小提琴，可以看到以下内容:
https://jsfiddle.net/8t5a0wcf/20/
和下一个代码:
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"t></script>
<div id="win_container_gen">
<div id="win_title"></div>
<div id="win_container">
<iframe src="http://famouspoetsandpoems.com" id="iframe" scrolling="yes" frameborder="0"></iframe>iframe>
</div>
<div id="win_footer"></div>
</div>CSS :
#win_container_gen
{
position:relative;
width:350px;
height:400px;
margin:auto;
border:4px soli #111;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
overflow:hidden;
}
#win_title
{
position:relative;
width:100%;
height:35px;
line-height:35px;
margin:auto;
font-family:Arial;
font-size:14px;
color:#fff;
padding-left:1%;
background-color:#111;
}
#win_container
{
display:block;
position:relative;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
border:1px solid;
background-color:#eee;
overflow:auto;
}
#win_footer
{
position:absolute;
width:100%;
height:40px;
line-height:40px;
cursor: nwse-resize;
background-color:grey;
bottom:0px;
}
#iframe
{
display:block;
width:100%;
height:100%;
}jQuery Resize
jQuery(document).ready(function() {
jQuery("#win_container_gen").resizable
({
handleSelector: "#win_footer"
});
});感谢在高级，最好的问候
回答 1
Stack Overflow用户
发布于 2018-06-23 13:26:31
编辑
正如OP所指出的，下面的方法并不能满足他的需求。
改变的方法：https://codepen.io/ajzk/pen/RJJZOO
从您的friddle中删除错误(</iframe>iframe>)似乎解决了这个问题，滚动条没有出现。
jQuery(document).ready(function() {
jQuery("#win_container_gen").resizable
({
handleSelector: "#win_footer"
});
});#win_container_gen {
position:relative;
width:350px;
height:400px;
margin:auto;
border:4px soli #111;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
overflow:hidden;
}
#win_title {
position:relative;
width:100%;
height:35px;
line-height:35px;
margin:auto;
font-family:Arial;
font-size:14px;
color:#fff;
padding-left:1%;
background-color:#111;
}
#win_container {
display:block;
position:relative;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
border:1px solid;
background-color:#eee;
overflow:auto;
}
#win_footer {
position:absolute;
width:100%;
height:40px;
line-height:40px;
cursor: nwse-resize;
background-color:grey;
bottom:0;
}
#iframe {
display:block;
width:100%;
height:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"t></script>
<div id="win_container_gen">
<div id="win_title"></div>
<div id="win_container">
<iframe src="http://famouspoetsandpoems.com/" id="iframe" scrolling="yes" frameborder="0"></iframe>
</div>
<div id="win_footer"></div>
</div>
<iframe width="560" height="315" src="http://www.youtube.com/embed/NlOF03DUoWc" frameborder="0" allowfullscreen></iframe>
llll
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51001409
复制相关文章
相似问题
腾讯云开发者
