Question

请帮我解决这个问题

<div id="parent">
    <div id="banner"></div>

    <div id="childsparent">
    <div id="child">
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
        sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
    </div>
    </div>
</div>

#parent {
    background: #CCC;
    width:200px;
    height:500px;
}

#banner {
    width:200px;
    height: 50px;
    background: #ff0000;
}

#childsparent {
    overflow:scroll;
}

我需要使它可滚动，但父div必须是它的高度，例如500px。

我知道只有父母和孩子才有效，但是当有多个div时，它会溢出div并且滚动不起作用。如何使这项工作？

Answer 1

这是更新的jsfiddle，其中包含工作示例http://jsfiddle.net/5xXwQ/1/

#parent {
        background: #CCC;
        width:200px;
        height:500px;
        overflow: hidden;
    }

#childsparent {
    height: 500px;
    overflow:scroll;
}

Answer 2

将height:450px;添加到#childsparent会为您提供您正在寻找的行为。

Answer 3

http://jsfiddle.net/5xXwQ/7/

#parent {
        background: #CCC;
        width:200px;
        height:550px;
    }

    #banner {
        width:200px;
        height: 50px;
        background: #ff0000;
    }

    #childsparent {
        overflow:scroll;
            height:500px;
    }

Answer 4

首先，我会将overflow:hidden;放在#parent上，但你仍然会有一个非常高的#childsparent。您必须限制#childsparent。如果你确定父母的身高是500px而#banner是200px，那么设置：

#childsparent {
    [...]
    height:300px; /*or*/
    max-height:300px;
}

如果#childsparent是#parent的唯一孩子，那么#childsparent { ... height:100%; }。否则，如果您不知道#banner的大小，那么请提取一些Javascript来进行数学运算。

滚动在多个div中不起作用

4 个答案: