css - 根据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()

• 如果它托管在与父级不同的域下，则您无法访问该内容，但如果您拥有该内容，则可以使用 Window 在 iframe 和父级之间设置通信 channel .postMessage()，因此您可以发送宽度值 - 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 那样。