根据 iframe 内容扩展 div 容器宽度

Question

如何对齐 div 以扩展其宽度以匹配 iframe 内容的大小。

需要扩展父 div 以匹配 iframe 的内容。如果 iframe 生成的内容超过了父 div 的宽度，如何自动扩展父 div 的宽度？？？

CSS

#header {
    background-color:#FFA500;
}
#container {
    width:500px;
    position:absolute;
    left:200px;
    vertical-align:center;
}

#mainContainer {
    border:0px solid red;
    height:auto;
}

#menu {
    background-color:#FFD700;
    height:auto;
    width:100px;
    float:left;
}

#content {
    background-color:#EEEEEE;
    height:auto;
    width:400px;
    float:left;
}

#footer {
    background-color:#FFA500;
    text-align:center;
    clear:both;
}

.width-2 {
    width: 500px;
}

.iframeContainer {
    border:1px solid red;
    width: auto;
}
.iframeContainer .embed-container iframe {
     width: auto;   
     height:100%;
     border:1px solid royalblue;
}
.width-auto .embed-container iframe {
     width: auto;   
}

.expected {
     width: 400px;   
     background: green;
}

HTML

<div id="container" >

    <div id="header" >
        <h1 style="margin-bottom:0;"> Web Page</h1>
    </div>
    <div id="mainContainer">
        <div id="menu" >
        <b>Menu</b><br>
        HTML<br>
        CSS<br>
        JavaScript<br>
        HTML<br>
        CSS<br>
        HTML<br>
        CSS<br>
        JavaScript<br>
        HTML<br>
        CSS<br>
        HTML<br>
        CSS<br>
        JavaScript<br>
        HTML<br>
        CSS<br>
        HTML<br>
        CSS<br>
        JavaScript<br>
        HTML<br>
        CSS<br>
        HTML<br>
        CSS<br>
        JavaScript<br>
        HTML<br>
        CSS<br>
    </div>

    <div id="content">
        Content goes here
        <p>You might have seen floating content of web sites which is always visible on the page even if you scroll it. This is easy achieve thing by using just CSS. However there is also JavaScript alternative for this but the CSS one is smoother and faster as this doesn't includes any run time calculation. The below step by step process will guide to how to add a always visible div on web page.</p>
    </div>
    <div class="iframeContainer">
        <div class="embed-container">
            <iframe src="http://player.vimeo.com/video/30279492?title=0&amp;byline=0&amp;portrait=0" width="400" height="180" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
        </div>
    </div>
</div>
<div style="clear:both;"></div>


<div id="footer">
    Copyright © W3Schools.com</div>

</div>

Answer 1

这取决于您与此 iframe 的关系。

• 如果是您自己的内容托管在与父级相同的域中，您可以使用javascript（jQuery示例）轻松抓取内容：$("iframe").contents().find("#content").width()

1234563所以你可以发送宽度值 - https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

• 如果不是您自己的内容，那么出于显而易见的原因，您将无法通过 iframe 访问它 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript - 除非内容提供商拥有与内容交互的 API，就像 Facebook 那样。