Question

我正在开发一个在我们公司内部使用的网站。因此，seo / optimization等不会出现问题，因为它是从本地机器而不是网络上运行的。

我要做的是在左侧（250px宽）有一个菜单，点击它后会打开它旁边的第二个菜单。单击此菜单中的项目时，它将在第二个菜单侧面的框架中打开。如果你查看附图，它将更好地理解布局。

http://rhinoaustralia.com/application/layoutProblems.jpg

我把基本网站放在这里： http://rhinoaustralia.com/application/

（请注意，内容缺失，只有少数工作正常，但我试图让布局先工作）。 css文件可以通过firebug等找到。

有一个页面包含第一个菜单，旁边有一个iframe。当有人点击某个菜单项时，它会在其旁边打开一个新页面。这个新页面还有一个菜单，旁边有一个iframe，因此当点击此菜单中的某些内容时，它会显示在新的iframe中。

这种方法有效，但我遇到的问题是将iframe设置为全屏并调整为不同的屏幕尺寸。出于某种原因，在IE中它也没有隐藏边界。

除了嵌套的iframe之外，还有更好的方法吗？

这是主页/首页：

<div id="container" style="width:100%">

<div id="header" style="background-color:#222;">
    <h1>Rhino Australia Rugby Union</h1></div>

    <div id="menu" style="background-color:#222;width:250px;float:left;">
      <ul class="ca-menu">
                <li>
                    <a href="rugby-union-scrum-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/collision-king.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Scrum & <br/>Breakdown</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a  href="rugby-union-tackle-bag-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/low-bag-grip-and-rip.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Tackle Pads <br/> & Bags</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="rugby-union-balls-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/vortex-pro.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Balls</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="rugby-union-training-equipment-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/rhino-body-armour.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Training <br/> Equipment</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="rugby-union-accessory-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/water-bottle-carrier-metal.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Accessories</h2>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

    <div id="content" style="background-color:#222; color:#FFF;float:left; width:80%; height:700px ">
    <iframe src="rugby-union-scrum.html" name="iframe_rugby-union-menu" width="100%" height="90%" frameborder="0"></iframe>
    </div>
</div>

继续在iFrame中打开的新页面：

<div id="container" style="width:100%">

    <div id="menu" style="background-color:#222;height:400px;width:300px;float:left;">
      <ul class="ca-menu">
                <li>
                    <a href="bulldog-sled.html" target="iframe_rugby-union">
                        <span class="ca-icon"><img src="images/rugby-union/scrum-sled.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Scrum Sled <br/> Machine</h2>
                            <h3 class="ca-sub">$7080</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a  href="collision-king.html" target="iframe_rugby-union">
                        <span class="ca-icon"><img src="images/rugby-union/collision-king.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Collision King</h2>
                            <h3 class="ca-sub">$3590</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="ca-icon"><img src="images/rugby-union/one-man-portable-scrum.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Portable Scrum <br/> Machine</h2>
                            <h3 class="ca-sub">$2770</h3>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

    <div id="content" style="background-color:#222; color:#FFF;float:left; width:800px; height:700px">
    <iframe src="rugby-union.html" name="iframe_rugby-union" width="100%" height="90%" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false">></iframe>
    </div>
</div>

任何帮助表示赞赏！

Answer 1

我认为使用iFrames这个功能并不是最好的主意，因为它本质上正在发生的是它仍然填充了iFrame div的100％宽度，正如CSS告诉它的那样，但是在较小的屏幕尺寸下，第二个iFrame没有适合和消失的空间。

也许你可以通过在本地div中放置资产来做到这一点？或者，对于更时尚的解决方案，请尝试使用jQuery Mega菜单库：http://designingmedia.com/html/fbar/?theme=FHMM

祝你好运！

iFrame布局和滚动问题

1 个答案: