1

我想在侧边栏旁边放一个 iframe。侧边栏有一个 250px 的常量，我希望 iframe 的宽度填满屏幕的其余部分。所以它的宽度是窗口大小减去 250px。我需要这个动态改变。我坚持使用我现有的代码。

<script type="text/javascript">$(window).resize(function() {
  $('iframe').prepend(width:$(window).width()px;);

});

</script>
<div style="float:left;"><iframe src="iframe url" 
frameborder="0" 
noresize="noresize" id ="iframe"
style="position:absolute; background:transparent; width:75%;height:100%;top:38px;border:none;padding:0;" />
</iframe>
</div>

这是 javascript 和 iframe。我究竟做错了什么？

4

2 回答 2

1

使用这个 JS：

$(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

$(window).resize(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

您还应该使周围的 DIV position:relative 使用绝对定位。

于 2012-09-14T21:23:23.917 回答
0

如果屏幕更大，这将有助于填充您拥有的任何空间并保持原始尺寸： https ://jsfiddle.net/koaab543/2/

我正在使用原始高度和宽度来计算比例。然后使用 css 获取限制为空间大小的当前宽度，并从中得出新的高度。

高度 / 宽度 = x / 当前宽度

function responseveIframe() {
  $('iframe').height(
    $('iframe').attr("height") / $('iframe').attr("width") * $('iframe').width()
  );
}

responseveIframe();

$(window).resize(function() {
  responseveIframe();
});
iframe {
  max-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe width="854" height="480" src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>

于 2016-03-30T08:57:43.097 回答