Question

我正在寻找的是一个容器div，其中包含任意数量的页眉和页脚，然后在各个页眉/页脚之间有另一个滚动div。这里的标题是页眉和页脚无法滚动，容器/页眉/页脚可以根据其内容占据任何高度。

我只能使用静态大小的页眉/页脚。在代码中我添加了我遇到的问题：页眉/页脚中的文本可能会换行，这会将它带到两行。因此标题应该增长以允许这个额外的行，并且内容应该缩小以给标题留出空间。有没有办法在不使用javascript的情况下执行此操作？如果有帮助，我会提前知道页眉/页脚的数量。

这将成为页面中可能包含一页或多页的组件，例如在2x2设置中，每个设置占用浏览器窗口的第4个。主要需要该功能，因为浏览器的宽度可能会发生变化，从而导致标题内容中断新行。这可以通过javascript轻松完成，但我总是听说resize事件处理程序是邪恶的。

例如，如果我的包装器为600px高，我可能有2个页眉和1个页脚。让我们说第一个标题的内容导致它突破到一个新行，但第二个标题不会。因此，第一个标题高度为20px，其中第二个标题为10px。并且假设页脚的内容也会导致换行符，因此高度为20px。这为我们提供了50px页眉和页脚，所以现在卷轴的高度应为550px。

Ascii Art：

 ____________________________________________
|         HEADER 1                           |
|________breaks to new line__________________|
|____________________________HEADER2_________|
|                                         | ||
|                                         | ||
|    This is my scroller                  | ||
|                                         | ||
|                                         | ||
|                                         | ||
|_________________________________________|_||
|     Some                                   |
|_____Footer_________________________________|

HTML：

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    ...
    </div>    
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

CSS：

body{
    height:100%;
}
.wrapper{
    height:400px;
    border-left:1px solid red;
}
.header, .footer{
    background-color: #EEE;
    height:27px;
}
.scroller{
    height:calc(100% - 54px);
    background-color: #CCC;
    overflow:auto;
}

红色边框表示包装器向下移动的距离，因此页脚不会显示在下方。我这样做而不是overflow: hidden只是为了调试。

http://jsfiddle.net/yKTdz/4/

Answer 1

使用纯CSS实现 （甚至不是CSS3），将table display与relative和absolute定位混合。

运行演示：http://jsfiddle.net/x4vhW/

HTML

<div class="wrapper">
    <div class="tr stretch">
        <div class="td">a header</div>
    </div>
    <div class="tr">
        <div class="td">
            <div class="contentWrapper">
                <div class="content">
                    content 0
                    ...............
                    ...............
                    ...............
                    content 29
                </div>
            </div>
        </div>
    </div>
    <div class="tr stretch">
        <div class="td stretch">a footer</div>
    </div>
</div>

CSS ^{Dark Magic（tm）}

.wrapper {
    height  : 200px;
    width   : 200px;
    display : table;
}

.tr { display : table-row; }

.td { display : table-cell; }

.stretch { height : 1%; }

.contentWrapper {
    position   : relative;
    overflow-y : scroll;
    height     : 100%;
}

.content {
    position : absolute;
    right    : 0; 
    left     : 0;
}

注意：使用stretch类是为了防止在内容内容较少时页眉和页脚增长;拉伸时，它们会自动调整。

最后，根据 CanIUse ，it is supported by almost all browsers，包括IE8。

Answer 2

我采用了Matt Cooper的解决方案并对其进行了更新。这解决了无法向页面添加多个窗口小部件以及页脚大小调整问题的问题。

http://jsfiddle.net/XSADu/10/

步骤：

使包装器相对，以便绝对的孩子可以定位
使页眉，页脚，卷轴绝对。将页脚放在底部
添加javascript以调整滚动条顶部/底部的大小。

CSS

.wrapper{
    height:400px;
    border-left:1px solid red;
    position: relative;
}

.header, .footer, .scroller {
    background-color: #EEE;
    position:absolute;
    width: 100%;
}
.footer {
    bottom: 0;
}

.scroller{
    background-color: #CCC;
    overflow:auto;
}

JS

$(document).ready(function(){
    $('.scroller').css("top", $('.header').height()); 
    $('.scroller').css("bottom", $('.footer').height());     
});

注意：如果页眉/页脚大小调整是动态的，您可能希望以包装器的百分比给它们一些最大高度，这样内容就不会被隐藏。

Answer 3

基于DMoses的答案，这个解决方案只涉及更多jquery，但它消除了页脚/标题略微隐藏的滚动条问题

jQuery：

$(document).ready(function(){
    $('.scroller').css("margin-top", $('.header').height());

    var height = $('.wrapper').height() - ($('.footer').height() + $('.header').height());

    $('.scroller').css("height", height);     
});

jsfiddle.net/XSADu/5/

Answer 4

现在可以很容易地使用CSS网格来完成。甚至不需要填充元件。

如果你想要多个标题，只需在其中添加几个div，或者将“header”div设为flexbox，如果这是你想要的。

HTML保持不变：

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    ...
    </div>    
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

CSS：

.wrapper{
    height:400px;
    border-left:1px solid red;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: [header] auto [content]1fr [footer]auto;
}
.header{
    background-color: #EEE;
    grid-row: header;
}
.footer{
    background-color: #EEE;
    grid-row: footer;
}
.scroller{
    background-color: #CCC;
    overflow:auto;
    grid-row: content
}

http://jsfiddle.net/yKTdz/15/

Answer 5

只有Css无法做到这一点，当页面加载并相应地调整内容时，您需要使用Javascript来检查页眉和页脚的高度。否则，当你使用position：fixed时，你会得到一些重叠。看到附带的小提琴！ http://jsfiddle.net/XSADu/

我使用jQuery来调整文件准备好的卷轴上的填充顶部。像这样

$(document).ready(function(){
    $('.scroller').css("padding-top", $('.header').height()); 
});

Answer 6

如Matt Cooper所述，我不认为有一个纯粹的解决方案。这是我的尝试：jsfiddle

var CalcHeight = function() {
    this.init = function() {
        var totHeight = $('body').height();
        var componentsHeight = $('.headers').height() + $('.footers').height();
        var diff = totHeight - componentsHeight;
        $('.hider').css({
            height: diff
        });
    }

    this.init();
}

var calcHeight = new CalcHeight;

具有动态大小的页眉/页脚的滚动条

6 个答案: