Question

这就是我想要的：

<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事件即可解决此问题。

可变大小的横幅和其下的内容与滚动

1 个答案: