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()
如果它位于与父级不同的域下，则无法访问该内容，但如果您拥有该内容，则可以使用{{1}在iframe与父级之间建立通信通道}，所以你可以发送宽度值 - 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确实

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

1 个答案: