CODEWITHSUNDEEP
htmlcss
user1929946
user1929946

Reputation: 2503

Variable sized banner and content under it with scroll

this is what I want:

http://jsfiddle.net/txvxJ/

<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 only problem is, the red content goes under the banner, thats wrong. How to fix this?

Upvotes: 0

Views: 84

Answers (1)

Filip Minx
Filip Minx

Reputation: 2488

with a little bit of javascript you can do it like this 

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 you resize the window, the layout would get screwed up. You would solve it simply by setting this function to window.onresize event.

Upvotes: 2

Related Questions