2

私が探しているものに本当に近づく別の投稿を見つけましたが、ずっとではありません。（http://stackoverflow.com/questions/10474354/layout-with-fixed-header-and-footer-fixed-width-sidebar-and-flexible-content）

基本的に、スクロール可能な各領域にヘッダー/タイトルセクションを追加したいと思います。ただし、これらはそれぞれのセクション内でスクロールしないでください。これがjsfiddleで、ヘッダーセクションをコメントアウトしました。それらが追加されると、ウィンドウの高さを超えてdivがプッシュされ、コンテンツが拡張されます。どんな助けでも大歓迎です！

元のコードは次のとおりです。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Application Wireframe</title>
<style type="text/css">
    body    {
        margin: 0;
        height: 100%;
    }

    #header {
        text-align: left;
        background: #4f0f00;
        color: #fff;
        width: 100%;
        margin: 0 0 0 0;
        border: 0;
        overflow: hidden;
        position: fixed;
    }
    #accountbar {
        background-color: #000000;
        color: white;
        height: 40px;
        width: 100%;
    }


    #contextbar {
        position:fixed;
        top:40px;
        width: 100%;
    }
    #leftheader {
        background-color: #66CCFF;
        height: 40px;
        width:200px;
        float:left;
    }
    #contentheader {
        background-color: #996600;
        color: white;
        height: 40px;
    }

    #middle {
        position:fixed;
        top:80px;
        width: 100%;
        height: 100%;
    }

    #left_col {
        float: left;
        width: 200px;
        /*height: 100%;*/
    }
    #left_col_wrap  {
        /*width: 100%;
        height: 100%;
        position: fixed;*/
    }
    #leftnav {
        background-color: #66FFFF;
        height: 100%;
        overflow: scroll;
        /*width: 200px;*/
    }

    #main_col   {
        /*margin-left: 200px;*/
        /*height: 100%;*/
    }
    #main_content_wrap  {
        /*position:fixed;
        width:100%;
        height: 100%;*/
    }
    #messagegap {
        background-color: white;
    }
    #contentpane {
        background-color: #FFAA00;
        height: 100%;
        overflow: scroll;
    }
    #contentfoot {
        background-color: #C80;
        height: 20px;
        position: fixed;
        width: 100%;
        bottom: 0;
        padding-bottom: 18px;
    }
    #footer {
        background-color: #CCCCCC;
        clear: left;
        width: 100%;
        position: fixed;
        bottom: 0;
    }
</style>
</head>
<body>
<div id="header">
    <div id="accountbar"><b>Account Bar</b> -always visible-this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="contextbar">
    <div id="leftheader"><b>Left Header</b></br>-usually says "Contents"-</div>
    <div id="contentheader"><b>Content Header</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="middle">
    <div id="left_col">
        <div id="left_col_wrap">
            <div id="leftnav"><b>Left Navigation</b>
                <ul>
                <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>  
    </div>
    <div id="main_col">

        <div id="main_content_wrap">
            <div id="contentpane"><b>Content Pane</b>
<p>Content Pane</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</p>
                <ul>
                    <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer"><b>Footer</b> -always visible, always at bottom of window-</div>
</body>
</html>

解決策は次のとおりです。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Application Wireframe</title>
<style type="text/css">
    body    {
        margin: 0;
        height: 100%;
    }

    #header {
        text-align: left;
        background: #4f0f00;
        color: #fff;
        width: 100%;
        margin: 0 0 0 0;
        border: 0;
        overflow: hidden;
        position: fixed;
    }
    #accountbar {
        background-color: #000000;
        color: white;
        height: 40px;
        width: 100%;
    }


    #contextbar {
        position:fixed;
        top:40px;
        width: 100%;
    }
    #leftheader {
        background-color: #66CCFF;
        height: 40px;
        width:200px;
        float:left;
    }
    #contentheader {
        background-color: #996600;
        color: white;
        height: 40px;
    }

    #middle {
        position:absolute;
        top:80px;
        width: 100%;
        overflow-y: visible;
        bottom: 8px;
        /*height: 100%;*/
    }

    #left_col {
        float: left;
        width: 200px;
        /*height: 100%;*/
    }
    #left_col_wrap  {
        /*width: 100%;
        height: 100%;
        position: fixed;*/
    }
    #leftnav {
        background-color: #66FFFF;
        height: 100%;
        overflow: scroll;
        /*width: 200px;*/
    }

    #main_col   {
        /*margin-left: 200px;*/
        /*height: 100%;*/
    }
    #main_content_wrap  {
        /*position:fixed;
        width:100%;
        height: 100%;*/
    }
    #messagegap {
        background-color: white;
    }
    #contentpane {
        background-color: #FFAA00;
        height: 100%;
        overflow: scroll;
    }
    #contentfoot {
        background-color: #C80;
        height: 20px;
        position: fixed;
        width: 100%;
        bottom: 0;
        padding-bottom: 18px;
    }



    #footer {
        background-color: #CCCCCC;
        clear: left;
        width: 100%;
        position: fixed;
        bottom: 0;
    }

</style>
</head>
<body>
<div id="header">
    <div id="accountbar"><b>Account Bar</b> -always visible-this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="contextbar">
    <div id="leftheader"><b>Left Header</b></br>-usually says "Contents"-</div>
    <div id="contentheader"><b>Content Header</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="middle">
    <div id="left_col">
        <div id="left_col_wrap">
            <div id="leftnav"><b>Left Navigation</b>
                <ul>
                <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>  
    </div>
    <div id="main_col">
        <div id="main_content_wrap">
            <div id="contentpane"><b>Content Pane</b>
                <p>Content Pane</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</p>
                <ul>
                    <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer"><b>Footer</b> -always visible, always at bottom of window-</div>
</body>
</html>
4

2 に答える 2

1

それで、あなたが探しているのは、スクロール可能な各 div 内に固定ヘッダーを持つことだと思いますか? 視覚的には、div の上部に固定ヘッダーを配置するのと同じです。ページ自体がスクロールしない限り、このソリューションは問題なく機能します。

position: fixed;この効果を得るために使用します。残りはあなたができると思います。

于 2012-11-04T05:22:07.450 に答える