html - 可变大小的横幅及其下方带有滚动的内容

Question

这就是我要的：

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>

唯一的问题是，红色内容在横幅下，那是错误的。如何解决这个问题？

Answer 1

用一点 javascript 你可以这样做

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>

但是如果你调整窗口大小，布局就会搞砸。您只需将此函数设置为 window.onresize 事件即可解决此问题。