1

申し訳ありませんが、それが本当に悪いタイトルであることはわかっていますが、より良いタイトルを思いつきませんでした.

純粋に CSS を使用してこの Web サイトをレイアウトしようとしています。以前はこれを 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 にあるページは、メイン メニュー、ナビゲーション パネル、その他のいくつかのツールバー、およびコンテンツを含むマスター ページを使用します。

メインマスター:

<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 がページ全体の高さからヘッダーとフッターを差し引いたものを占めるのに問題がある
  • スクロールバーをコンテンツ セクションにのみ表示する
  • スクロールしてもナビゲーション パネルやその他のツールバーが動かない

このページを正しくレイアウトするのを手伝ってくれる人はいますか?

4

2 に答える 2

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;
}
于 2013-07-19T22:57:18.777 に答える
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;
}
于 2013-07-19T23:00:04.773 に答える