对不起,我知道这是一个非常糟糕的标题,但我无法想出更好的标题。
我正在尝试使用纯CSS来布局这个网站。以前这是使用javascript完成的,但我知道它可以用CSS完成。
首先关闭:这是预期布局的图表:
基本上,我们有一个包装页面,它有一个页眉,一个页脚和一个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>
我面临的问题是:
任何人都可以帮我正确地布置这个页面吗?
答案 0 :(得分: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;
}
答案 1 :(得分:0)
/*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;
}