Question

我希望横跨窗口的宽度和高度彼此相邻的5个div（每个div占据窗口宽度的20％）。任何不适合div的内容都应该被隐藏。这就是css查找两个div的方式：

#container1 {
    float:left; 
    width:20%; 
    height:100%;
}
#container1 .scrollBox {
    height:100%; 
    overflow:hidden;
}
#container1 .scrollBox .container {
    position:relative; 
    width:94%; 
    float:left;
}
#container1 .scrollBox .content {
    clear:both;
}
#container1 .scrollBox .content p {
    padding:0 5px; 
    margin:10px 0; 
    color:#fff; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:13px; 
    line-height:20px;
}

#container2 {
    float:left; 
    width:20%; 
    height:90%;
}
#container2 .scrollBox {
    height:100%; 
    overflow:hidden;
}
#container2 .scrollBox .container {
    position:relative; 
    width:94%; 
    float:left;
}
#container2 .scrollBox .content {
    clear:both;
}
#container2 .scrollBox .content p {
    padding:0 5px; 
    margin:10px 0; 
    color:#fff; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:13px; 
    line-height:20px;
}

容器会根据需要显示在彼此旁边，但不会隐藏溢出内容。高度适合内容...... 有什么帮助吗？

非常感谢

Answer 1

用户代理需要一个参考值来解决百分比。如果没有指定任何内容，有时会使用视口高度，但在大多数情况下，您必须明确它。

html,body {
    margin:0;
    padding:0;
    height:100%;
}

margin和padding规则会覆盖一些默认的用户代理样式。

http://www.w3.org/TR/CSS2/visudet.html#propdef-height

Answer 2

将overflow:hidden放在#container1 {}内而不是#container1 .scrollBox {}。

溢出问题：隐藏

2 个答案: