具有动态大小的页眉/页脚的滚动器 [英] Scroller with dynamically sized headers/footers
问题描述
我要找的是一个容器 div ，任何数量的页眉和页脚，然后将有另一个滚动 div 在各种页眉/页脚之间。这里的标题是页眉和页脚不能滚动，容器/页眉/页脚可以根据其内容采取任何高度。
我只能让这个工作与静态大小的页眉/页脚。在代码中，我添加了我遇到的问题：页眉/页脚中的文本可能会换行，这将使它到两行。所以标题应该增长以允许这个额外的行和内容应该收缩以给空间的标题。有没有办法这样做而不使用javascript？如果有帮助，我会知道提前的页眉/页脚数。
这将是一个页面中的组件，每页可能有一个或多个示例在2x2设置中，其中每个占用浏览器窗口的4。主要需要的功能是，浏览器的宽度可能会更改，导致标题内容打破一个新的行。这可以很容易地用javascript来完成，但我一直听说 resize 事件处理程序是邪恶的。
示例如果我的包装器 600px 高，我可能有2个标题和1个页脚。假设第一个标题的内容导致它断开到一个新行，但第二个标题没有。所以第一个标题的高度是 20px 其中第二个是 10px 。并且让页脚的内容也导致换行，因此具有 20px height。这会给我们 50px 的页眉和页脚，所以现在滚动的高度应该 550px 。
Ascii艺术：
____________________________________________
| HEADER 1 |
| ________分成新行__________________ |
| ____________________________ HEADER2 _________ |
| | ||
| | ||
|这是我的卷轴| ||
| | ||
| | ||
| | ||
| _________________________________________ | _ ||
|一些|
| _____ Footer _________________________________ |
HTML：
< div class =wrapper>
< div class =header>
有些< br />
标题
< / div>
< div class =scroller>
内容< br />
内容< br />
内容< br />
内容< br />
...
< / div>
< div class =footer>
有些< br />
Footer
< / div>
< / div>
CSS：
code> 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 只是为了调试。
表显示与混合使用，可以使用纯CSS 相对
和绝对定位。HTML
< div class =wrapper ;
< div class =tr stretch>
< div class =td>一个标头< / 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>一个页脚< / div>
< / div>
< / div>
CSS Dark Magic（tm） / p>
.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。
What I'm looking for is to have a container div with any number of headers and footers which would then have another scrolling div in between the various headers/footers. The catch is here that the headers and footers can't scroll and the container/headers/footers can take any height depending on their content.
I've only been able to get this working with a statically sized header/footer. In the code I've added the problem I've come across: the text in the header/footer may wrap, which will bring it to two lines. So the header should grow to allow this extra line and the content should shrink to give space to the header. Is there any way to do this without using javascript? I will know the number of headers/footers ahead of time if that helps.
This is going to be a component in a page possibly with one or more per page, for example in a 2x2 setup where each takes up a 4th of the browser window. The functionality is mainly needed as the width of the browser might change causing the header content to break a new line. This could be done pretty easily with javascript but I've always heard that resize event handlers are evil.
For example if my wrapper is 600px high, I may have 2 headers and 1 footer. Lets say the first header's content causes it to break to a new line, but the second header's doesn't. So the first headers height is 20px where the second's is 10px. And lets say the footer's content also causes a line break and thus has 20px height. This gives us 50px worth of headers and footers so now the height of the scroller should be 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;
}
the red border is to show how far the wrapper goes down, so the footer doesn't show up below. I did this instead of overflow: hidden simply for debugging.
Achieved with pure CSS
(not even CSS3), by mixing table display with relative and absolute positioning.
Running Demo: 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;
}
Note: the stretch class is used in order to prevent headers and footers to grow if content has a small content; with stretch, they will auto-fit.
And finally, according to CanIUse, it is supported by almost all browsers, including IE8.
这篇关于具有动态大小的页眉/页脚的滚动器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
