带动态大小页眉/页脚的滚轮

Question

我在寻找的是一个容器div与任何数量的页眉和页脚，然后在不同的页眉/页脚之间有另一个滚动div。问题在于，页眉和页脚不能滚动，容器/页眉/页脚可以根据其内容采取任何高度。

我只能用静态大小的页眉/页脚获得此工作。在代码中，我添加了我遇到的问题：页眉/页脚中的文本可能会打包，这会将它带到两行。所以标题应该增加以允许这个额外的行，并且内容应该缩小以给标题留出空间。有没有办法做到这一点，而不使用JavaScript？如果有帮助，我会提前知道页眉/页脚的数量。

这将成为页面中的一个组件，可能每个页面有一个或多个页面，例如在2x2设置中，每个页面占用浏览器窗口的四分之一。该功能主要是因为浏览器的宽度可能会改变而导致标题内容打破新行。这可以用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; 
} 

的红色边框是展示包装多远下降，所以页脚没有按” t显示在下面。我只是为了调试而不是overflow: hidden。

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

Answer 1

这现在可以很容易地使用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/

Answer 2

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

我使用jQuery来调整文档上的滚动条上的填充顶部。像这样

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

Answer 3

正如马特库珀所说，我不认为有一个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; 

Answer 4

我拿了马特库珀的解决方案，并更新了一下。这解决了无法将多个小部件添加到页面以及页脚大小问题。

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

步骤：

1. 使相对的包装，以便绝对可儿位置
2. 制作页眉，页脚，滚动绝对的。将页脚定位在底部
3. 添加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 5

大厦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 6

实现了与纯CSS （甚至没有CSS3），通过与relative和混合定位。

运行演示：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类用于防止页眉和页脚在内容较小的情况下增长;与舒展，他们将自动适合。

最后，根据可以使用,it is supported by almost all browsers，包括IE8。