asp.net - 如何在 iFrame 中的母版页中获取滚动内容？

Question

抱歉，我知道这是一个非常糟糕的标题，但我想不出一个更好的。

我正在尝试使用纯 CSS 来布置这个网站。以前这是使用 javascript 完成的，但我知道它可以只用 CSS 完成。

首先:这是预期布局的图表:

基本上，我们有一个包含页眉、页脚和 iFrame 的包装页面:

包装器.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 中的页面使用具有主菜单、导航面板、更多工具栏的母​​版页，然后是内容:

主.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>

然后是使用母版页的页面。我硬编码了宽度和高度以强制显示滚动条:

页面.aspx:

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

我面临的问题是:

• 在让 iFrame 占据整个页面高度减去页眉和页脚时遇到问题
• 让滚动条只出现在内容部分
• 让导航面板和其他工具栏在我滚动时不移动

任何人都可以帮助我正确布置此页面吗？

Answer 1

我认为固定位置元素有点恶心，因为当用户可能只想查看内容时，它会迫使用户不断查看所有额外内容，但这听起来正是您要查找的内容。你可以尝试这样的事情: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;
}