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

为此，您需要使用position: fixed;我认为您正在寻找这个。

HTML:

<div id="header">  Header Content    </div>

<div id="wrapper">

    <div id="leftheader"> Left Header   </div>

        <div id="leftwrapper">
                 ---CONTENT HERE---
        </div>        

    <div id="rightheader"> Right Header </div>

        <div id="rightwrapper">                     
                ---CONTENT HERE---
        </div>        
</div>

<div id="footer">   Footer Content    </div>

CSS:

<style type="text/css">
 div#header
 {position: fixed;left: 0px;top: 0px;height:100px;width:100%;background: black;color: White; }

  div#leftheader
  {position: fixed;left: 0px;top: 100px; height: 50px;width: 30%;float: left; background: red; color: White;    }

  div#leftwrapper
  {position: fixed;left: 0px;color: Maroon;margin-top: 150px;margin-left: 0;margin-bottom: 100px; width: 30%; min-width: 30%; height: 600px; max-height: 600px; overflow-y: auto;    }

  div#rightheader
  {position: fixed;left: 0px;top: 100px; height: 50px;width: 70%;margin-left: 30%;float: right;background: green;color: White;}

  div#rightwrapper
  {position: fixed;left: 0px;color: Purple;margin-left: 30%;margin-top: 150px;margin-bottom: 100px;width: 70%; min-width: 70%;height: 500px;max-height: 500px;overflow-y: auto; }

  /*div#wrapper
  {   height: 1000px;   }*/        

  div#footer
  {position: fixed;left: 0px;bottom: 0px; height: 100px;width: 100%;background: black;color: White;}
</style>

注意：我只在Firefox中测试过。

希望，它会帮助你。谢谢并继续发帖。

干杯。！！

于 2012-11-03T07:39:32.060 回答
1

所以我认为你正在寻找的是在每个可滚动的 div 中都有固定的标题？从视觉上看，这与将固定标题放在 div 顶部相同。只要页面本身不滚动，这个解决方案就可以正常工作。

你会用它position: fixed;来达到这个效果。其余的我认为你可以做到。

于 2012-11-04T05:22:07.450 回答