{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 手持菜刀，她持情操 的问题《div + scroll + fixed bottom + variable top》','https://www.manongdao.com/q-823815.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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
pluse heights 1st header + 2nd footer +.3rd top2 ( get by this function $( document ).height();)
minus height in windows height