div +滚动+固定底部+可变顶部 [英] div + scroll + fixed bottom + variable top
问题描述
我在调整滚动div以填充窗口时遇到问题，因为我有一个或多个顶部div和一个页脚div。
这就是我需要的
+ ------------ ------ + + ------------------ + + ------------------ +
| top1 | | top1 | | top1 |
+ ------------------ + + ------------------ + + ----- ------------- +
| top2 | | top2 | | | ^ |
| | + ------------------ + | | |
+ ------------------ + | | ^ | | | |
| | ^ | | | | |滚动| |
| | | => |滚动| | => | | |
|滚动| | | | | | | |
| | | | | | | | |
| | | | | | | | |
| | V | | | V | | | V |
+ ------------------ + + ------------------ + + ----- ------------- +
|页脚| |页脚| |页脚|
+ ------------------ + + ------------------ + + ----- ------------- +
Top1 具有固定的高度。
页脚具有固定的高度。 strong> Top2 没有固定的高度，有时甚至不会出现。
我知道要做到这一点的唯一方法是定义容器高度，固定其顶部和底部。但是我无法修复top2属性，因为top2 div有可变高度......
有人可以帮我吗？
html：
< body>
< div id ='top1'> Top1< / div>
< div id ='top2'> Top2< / div>
< div id ='container'>
< ul id ='data'>
< li> item1< / li>
< li> item2< / li>
< li> item3< / li>
< li> item4< / li>
< li> item5< / li>
< li> item6< / li>
< li> item7< / li>
< li> item8< / li>
< li> item9< / li>
< li> item10< / li>
< / ul>
< / div>
< div id =footer> footer< / div>
< / body>
css：
body，html {
height：100％;
}
＃top1 {
width：100％;
height：50px;
background-color：#EEE;
text-align：center;
line-height：50px;
}
＃top2 {
width：100％;
height：50px;
background-color：#DDD;
text-align：center;
line-height：50px;
}
#footer {
width：100％;
height：50px;
背景颜色：#BBB;
text-align：center;
line-height：50px;
位置：固定;
bottom：0;
}
#container {
overflow：auto;
宽度：100％;
位置：绝对;
top：100px;
bottom：50px;
}
#data li {
font-size：30px;
padding：10px;
试试看
- 首先通过此函数获取窗口高度
$（window）.height（）; - 和为top2
$（document）.height（）;
-
创建一个更多的函数pluse heights 1st header + 2nd footer + .3rd top2（get by this function $ （document）.height（）;）
-
减去窗口高度的高度
新高度，并应用于scrlloing div - 还有一件事是让scrlloing更好使用调整大小功能
I have a problem with sizing a scrolling div to fill the window, considering that I have one or more top divs and a footer div.
this is what I need
+------------------+ +------------------+ +------------------+
| top1 | | top1 | | top1 |
+------------------+ +------------------+ +------------------+
| top2 | | top2 | | |^|
| | +------------------+ | | |
+------------------+ | |^| | | |
| |^| | | | | scroll | |
| | | => | scroll | | => | | |
| scroll | | | | | | | |
| | | | | | | | |
| | | | | | | | |
| |v| | |v| | |v|
+------------------+ +------------------+ +------------------+
| footer | | footer | | footer |
+------------------+ +------------------+ +------------------+
Top1 has a fixed height.
Footer has a fixed height.
Top2 doesn't have a fixed height and sometimes doesn't even appear.
The only way I know to do that is by defining the container height, fixing its top and its bottom. But I cannot fix the top property since the top2 div has variable height...
Can someone help me?
html:
<body>
<div id='top1'>Top1</div>
<div id='top2'>Top2</div>
<div id='container'>
<ul id='data'>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
</div>
<div id="footer">footer</div>
</body>
css:
body, html {
height: 100%;
}
#top1 {
width: 100%;
height: 50px;
background-color: #EEE;
text-align: center;
line-height: 50px;
}
#top2 {
width: 100%;
height: 50px;
background-color: #DDD;
text-align: center;
line-height: 50px;
}
#footer {
width: 100%;
height: 50px;
background-color: #BBB;
text-align: center;
line-height: 50px;
position: fixed;
bottom: 0;
}
#container {
overflow: auto;
width: 100%;
position: absolute;
top: 100px;
bottom: 50px;
}
#data li {
font-size: 30px;
padding: 10px;
}
try it
- first get windows height by this function $( window ).height();
- and make one more function for top2 $( document ).height();
pluse heights 1st header + 2nd footer +.3rd top2 ( get by this function $( document ).height();)
minus height in windows height
- then will get new height and apply on scrlloing div
- one more thing for make better scrlloing use resizing function
这篇关于div +滚动+固定底部+可变顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
