div 和 iframe 在页面中彼此并排答案

【问题标题】：div & iframe beside each other in a pagediv 和 iframe 在页面中彼此并排
【发布时间】：2012-05-21 01:23:25
【问题描述】：

我有一个 div，其中包含左对齐的菜单和右对齐的 iframe，还有一个用于显示/隐藏 div 的滑动切换按钮，我想做的是让 iframe 在 div 消失时自动调整大小占据页面的整个宽度，并在出现时为 div 留出空间，我该如何实现？

<script>
        $(document).ready(function(){
$(".flip").click(function(){
    $(".mmenu").slideToggle("slow");
  });
});
</script>
 <button class="flip">Show.Hide menu</button>
                     <div id="nav" class="mmenu" style="float: left; border-radius: 10px; position: fixed;
                             bottom: 75px;border: 5px solid #003366; bottom: 50px;">
                            <ul type="none">
                                <li><a target="collabsoft" href= "ProfilePage.php?property_variable=mine">My Profile</a></li>
                                        <li><a target="collabsoft" href= "viewMessages.php">Messages</a></li>
                                        <li><a target="collabsoft" href= "userHomepage.php">My Conferences</a></li>

                                    </ul>
                                </div>
                                <iframe scrolling="no" id="collabsoft" name="collabsoft" src="latestNews.php" style="position: relative;
                             width: 950px; height: 100%;></iframe>

【问题讨论】：

你为什么使用 iframe？这可能会影响解决方案。
@Blowski 我必须使用 iframe 在其中加载网站的内容。
为什么内容没有直接加载到页面中，而不是在 iframe 中？ iframe 有各种各样的问题，你应该将它们作为最后的手段。
你在 iframe 上有一个固定的宽度（950px）所以改变宽度不会发生，你也需要在那个 iframe 上关闭 "，加上按钮在 iframe 的左边，它也占用空间

标签： javascript jquery iframe html autoresize

【解决方案1】：

与@Pakauji Pakau 的解决方案基本相同，但情况稍微简单一些：http://jsfiddle.net/RichardTowers/x6djM/1/。

由于显示和隐藏的内容不同，我会明确使用show() 和hide() 而不是slideToggle()。

【讨论】：

非常感谢，这正是我需要的

【解决方案2】：

你可以试试这个，我已经编辑了你的代码

 <script>
    $(document).ready(function () {
        if ($("#nav").is(':visible')) {
            $("#iframe1").attr("width", "68%");
        }
        else {

            $("#iframe1").attr("width", "100%");

        }
        $(".flip").click(function () {
            if ($("#nav").is(':visible')) {
                $(".mmenu").slideToggle("slow");
                $("#iframe1").attr("width", "100%");
            }
            else {
                $(".mmenu").slideToggle("slow");
                $("#iframe1").attr("width", "68%");

            }
        });
        return false;
    });
</script>
<input type="button" class="flip" value="Show/Hide menu" />
<div>
    <div id="nav" class="mmenu" style="float: left; border-radius: 10px; border: 5px solid #003366;
        bottom: 50px;">
        <ul type="none">
            <li><a target="collabsoft" href="#">My Profile</a></li>
            <li><a target="collabsoft" href="#">Messages</a></li>
            <li><a target="collabsoft" href="#">My Conferences</a></li>
        </ul>
    </div>
    <iframe id="iframe1" scrolling="no" id="collabsoft" name="collabsoft" src="" style="height: 100%;">
    </iframe>
</div>

【讨论】：

【解决方案3】：

嗯，这是一个可能的解决方案。或者至少是一个开头：http://jsfiddle.net/86Vgz/

【讨论】：

【解决方案4】：

你也可以使用DIV来占据左边的空间，并在点击时转移菜单的宽度

$(document).ready(function(){
    $("#nav").width($("#nav ul").outerWidth());
    $(".flip").click(function(){
    $(".mmenu").slideToggle("slow");
    $("#nav").width($("#nav ul").outerWidth());
});

需要做更多的工作来保存动画

<body>
       <button class="flip">Show.Hide menu</button><br/>
   <div style="display:table;width:100%;border:solid 10px lime">
          <div id="nav" class="mmenu" style="display:table-cell">
             <ul type="none" style="border-radius: 10px; position: fixed; bottom: 75px;border: 5px solid #003366; bottom: 50px;">
                <li><a target="collabsoft" href= "ProfilePage.php?property_variable=mine">My Profile</a></li>
                <li><a target="collabsoft" href= "viewMessages.php">Messages</a></li>
                <li><a target="collabsoft" href= "userHomepage.php">My Conferences</a></li>

             </ul>
          </div>
          <iframe scrolling="no" id="collabsoft" name="collabsoft" style="position: relative; width: 100%; height: 100%;display:table-cell">XXX</iframe>
</div>
</body>

【讨论】：