html - Variable sized banner and content under it with scroll -
this want:
<div style="position: fixed; overflow: scroll; bottom: 0; left: 0; right: 0; top: 0px; background: red;">a<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1</div> <div style="position: fixed; top: 0; left: 0; right: 0; height: height: auto; background-color: yellowgreen;"><img src="http://prog.hu/site/images/logo.gif" width="100%" /></div>
the problem is, red content goes under banner, thats wrong. how fix this?
with little bit of javascript can
window.onload = function() { var img = document.getelementbyid('bannerimg'), cs = (window.getcomputedstyle) ? window.getcomputedstyle(img, '') : img.currentstyle; document.getelementbyid('content').style.top = cs.height; } <div id="content" style="position: absolute; overflow: scroll; bottom: 0; left: 0; right: 0; top: 0px; background: red;">a<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1</div> <div style="position: absolute; top: 0; left: 0; right: 0; height: auto; background-color: yellowgreen;"><img id="bannerimg" src="http://prog.hu/site/images/logo.gif" width="100%" /></div>
but if resize window, layout screwed up. solve setting function window.onresize event.
Comments
Post a Comment