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

Sorry, I know that's a really bad title, but I couldn't come up with a better one.

对不起，我知道这是一个非常糟糕的标题，但我无法想出一个更好的标题。

I'm trying to lay out this website using purely CSS. Previously this had been accomplished using javascript, but I know that it can be done with just CSS.

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

first off: here's a diagram of the intended layout:

首先：这是预期布局图：

Basically, we have a wrapper page that has a header, a footer, and an iFrame:

基本上，我们有一个包装页面，它有一个页眉，一个页脚和一个iFrame：

wrapper.aspx:

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>

then, the page that is in the iFrame, uses a master page which has a main-menu, a navigation panel, a few more toolbars, and then the content:

然后，iFrame中的页面使用主页面，其中包含主菜单，导航面板，一些工具栏，然后是内容：

main.master:

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>

And then there's the page that uses the master page. I hard-coded in the width and height to force the scrollbars to appear:

然后是使用母版页的页面。我在宽度和高度上硬编码以强制滚动条出现：

page.aspx:

page.aspx：

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

The problems I'm facing are:

我面临的问题是：

• Having problems getting the iFrame to take up the entire page height minus header and footer
• 在让iFrame占据整个页面高度减去页眉和页脚时遇到问题
• Getting the scrollbars to appear ONLY in the content section
• 使滚动条仅出现在内容部分中
• having the navigation panel and other toolbars not move when I scroll
• 滚动时导航面板和其他工具栏不会移动

Can anyone help me get this page laid-out correctly?

任何人都可以帮我正确布局这个页面吗？

2 个解决方案

#1

I think fixed position elements are kind of gross, because it forces the user to constantly see all your extra stuff when they might just want to see the content, but it sounds like what you're looking for. You can try something like this: http://jsfiddle.net/HBeBq/

我认为固定位置元素有点粗略，因为它迫使用户在他们可能只想看到内容时不断看到所有额外的东西，但这听起来像你正在寻找的东西。你可以试试这样的东西：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;
}

#2

Adam's answer is very good. I did something similar:

亚当的答案非常好。我做了类似的事情：

/*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;
}