抱歉,我知道这是一个非常糟糕的标题,但我想不出一个更好的。
我正在尝试使用纯 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 占据整个页面高度减去页眉和页脚时遇到问题
- 让滚动条只出现在内容部分
- 让导航面板和其他工具栏在我滚动时不移动
任何人都可以帮助我正确布置此页面吗?
最佳答案
我认为固定位置元素有点恶心,因为当用户可能只想查看内容时,它会迫使用户不断查看所有额外内容,但这听起来正是您要查找的内容。你可以尝试这样的事情: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;
}
关于asp.net - 如何在 iFrame 中的母版页中获取滚动内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17756429/