如何在母版頁中獲取滾動內容，即在iFrame中？

對不起，我知道這是一個非常糟糕的標題，但我無法想出更好的標題。如何在母版頁中獲取滾動內容，即在iFrame中？

我想使用純粹的CSS佈局這個網站。以前這已經完成使用JavaScript，但我知道它可以用CSS來完成。

第一關：這裏的意圖佈局的示意圖：

layout 基本上，我們有一個有頁眉，頁腳，和一個iFrame的包裝頁：

wrapper.aspx：

<form id="form1" runat="server"> 
    <div id="wrapper"> 
     <div id="divHeader"> 
     </div> 
     <div id="divMain" > 
      <iframe id="ifrmMainBody" src="page.aspx"></iframe> 
     </div> 
     <div id="divFooter" > 
     </div> 
    </div> 
</form>

話，也就是在所述iFrame的頁面，使用其中有一個主菜單，導航面板，幾多個工具欄，然後該內容的主頁：

main.master：

<form runat="server"> 
    <div id="mainMenu"> 
     main menu 
    </div> 
    <div id="navPanel"> 
     navigation panel 
    </div> 
    <div id="breadCrumb"> 
     bread crumb 
    </div> 
    <div id="caption"> 
     caption 
    </div> 
    <div id="subMenu"> 
     sub-menu 
    </div> 
    <div id="toolBar"> 
     toolbar 
    </div> 
    <div id="content"> 
     content 
    </div> 
    <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
</form>

然後還有使用該母版頁的頁面。我硬編碼在寬度和高度來強制出現滾動條：

page.aspx：

<form> 
    <div style="height: 1200px; width: 1500px;"> 
     <p> 
      Put content here. 
     </p> 
    </div> 
</form>

我所面臨的問題是：

得到的iFrame

有問題佔據整個頁面高度減去頁眉和頁腳
使滾動條僅出現在內容部分
具有導航面板和其他工具欄當我滾動時，我不會移動

任何人都可以幫我弄到這個頁面佈置正確嗎？

來源

2013-07-19 matthew_360

我認爲固定位置元素有點粗俗，因爲它會強制用戶不斷地看到所有額外的東西，當他們可能只是想看內容時，但它聽起來像你在找什麼。你可以嘗試這樣的事情：http://jsfiddle.net/HBeBq/

#header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 5em; 
} 
#navigation { 
    position: fixed; 
    left: 0; 
    top: 5em; // same as header height 
    bottom: 5em; // same as footer height 
    width: 10em; 
} 
#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 5em; 
} 
#contentWrapper { 
    position: fixed; 
    left: 10em; // same as nav width 
    top: 5em; // same as header height 
    bottom: 5em; // same as footer height 
    right: 0; 
    overflow: auto; // if this div's contents are too big, scrollbars automatically appear 
} 
#content { 
    position: relative; 
    width: 2000px; 
    height: 2000px; 
}

來源

2013-07-19 22:57:18

謝謝。是的，這不是我如何選擇放置頁面，但它是分配給我的。實際上，我只是用自己的東西來完成自己的工作。 –

亞當的答案是非常好的。我做了類似的事情：

/*in wrapper*/ 
#wrapper { 
    width: 100%; 
    height: 100%; 
} 
#divHeader 
{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 30px; 
    background-color: #756398; 
} 
#divMain /*container for iframe*/ 
{ 
    position: absolute; 
    top: 30px; 
    bottom: 30px; 
    left: 0px; 
    right: 0px;  
} 
#ifrmMainBody 
{ 
    width: 100%; 
    height: 100%; 
} 
#divFooter 
{ 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    height: 30px; 
    background-color: #926531;  
} 

/*in master*/ 
#mainMenu 
{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 30px; 
    background-color: #a9b77c;  
} 
#navPanel 
{ 
    position: absolute; 
    top: 30px; 
    left: 0px; 
    bottom: 0px; 
    width: 150px; 
    background-color: #b87c9a; 
} 
#breadCrumb 
{ 
    position: absolute; 
    top: 30px; 
    left: 150px; 
    right: 0px; 
    height: 20px; 
    background-color: #ABCDEF; 
} 

#caption 
{ 
    position: absolute; 
    top: 50px; 
    left: 150px; 
    right: 0px; 
    height: 20px; 
    background-color: #AB79B8; 
} 

#subMenu 
{ 
    position: absolute; 
    top: 70px; 
    left: 150px; 
    right: 0px; 
    height: 20px; 
    background-color: #A7b2E5; 
} 
#toolBar 
{ 
    position: absolute; 
    top: 90px; 
    left: 150px; 
    right: 0px; 
    height: 20px; 
    background-color: #E76235; 
} 
#content 
{ 
    position: absolute; 
    top: 110px; 
    left: 150px; 
    right: 0px; 
    bottom: 0px; 
    background: #666; 
    overflow: auto; 
}

來源

2013-07-19 23:00:04

如何在母版頁中獲取滾動內容，即在iFrame中？

回答

相關問題