我正在開發一個網站在我們公司內部使用。 因此,seo /優化等是沒有問題的,因爲它運行在本地機器而不是網絡。iFrame佈局和滾動問題
我想要做的是在左邊有一個菜單(250像素寬),點擊後,打開旁邊的第二個菜單。當點擊此菜單中的項目時,它將打開到第二個菜單的邊框。如果你看看附圖,它會更好地理解佈局。
http://rhinoaustralia.com/application/layoutProblems.jpg
我已經把這裏的基本部位: http://rhinoaustralia.com/application/
(注意,內容缺失,只有少數工作的事情,但我想獲得的佈局工作第一)。 css文件可以通過螢火蟲等找到
什麼是一個單一的頁面,其中包含一個iframe旁邊的第一個菜單。當有人點擊菜單項時,它會在其旁邊打開一個新頁面。這個新頁面還有一個菜單,旁邊有一個iframe,這樣當點擊這個菜單中的內容時,它會顯示在新的iframe中。
這類作品,但我有問題的獲取iframes是全屏和調整到不同的屏幕尺寸。出於某種原因,在IE中它也沒有隱藏邊界。
也許有更好的方法來做到這一點,而不是嵌套iframes?
這是主要的頁/第一頁:
<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>
任何幫助表示讚賞!