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

Question

我正在寻找的是拥有一个包含div任意数量的页眉和页脚的容器，然后div在各个页眉/页脚之间进行另一个滚动。问题在于页眉和页脚无法滚动，并且容器/页眉/页脚可以根据其内容采用任何高度。

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

这将是一个页面中的一个组件，每个页面可能有一个或多个，例如在 2x2 设置中，每个组件占据浏览器窗口的 4 分之一。主要需要该功能，因为浏览器的宽度可能会发生变化，导致标题内容换行。这可以用 javascript 很容易地完成，但我一直听说resize事件处理程序是邪恶的。

例如，如果我的包装器600px很高，我可能有 2 个页眉和 1 个页脚。假设第一个标题的内容导致它换行，但第二个标题没有。所以第一个标题高度是20px第二个标题的高度10px。假设页脚的内容也会导致换行，因此具有20px高度。这为我们提供50px了页眉和页脚的价值，所以现在滚动条的高度应该是550px.

ASCII艺术：

 ____________________________________________
|         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/

score 2 · Accepted Answer

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

运行演示：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 ^{黑暗魔法 (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的说法，几乎所有浏览器都支持它，包括 IE8。

score 1 · Accepted Answer

基于 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/

score 1 · Accepted Answer

我采用了 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());     
});

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

score 1 · Accepted Answer

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

如果您想要多个标题，只需在其中放置几个 div，或者如果您想要的话，将“标题”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/

score 0 · Accepted Answer

正如马特库珀所说，我认为没有纯 CSS 解决方案。这是我的尝试：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;

score 0 · Accepted Answer

仅使用 Css 无法做到这一点，您需要使用 Javascript 在页面加载时检查页眉和页脚的高度并相应地进行调整。否则，当您使用 position:fixed 时，您会得到一些重叠。见附上的小提琴！http://jsfiddle.net/XSADu/

我使用 jQuery 来调整文档准备好的滚动条上的 padding-top。像这样

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

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

6 回答 6

Related

Reference