Question

我在这里有例子 http://jsfiddle.net/brain2xml/cVAMN/

<div id="container">
<div class="sep">1</div>
<div class="sep">2</div>
<div class="sep">3</div>
<div class="sep">4</div>
<div class="sep">5</div>
</div>

和css

.sep{
    border:1px solid red;
    height: 50px;
    width: 280px;
    margin: 10px;
}
#container{
    height: 170px;
    width: 300px;
    border:1px solid green;
}

我希望容器内的块（块3,4和5）是隐藏的，如果它们不是整个容器内的话。如果我将溢出属性放到容器中，块＃3的一半仍然可见。但是如果它们在容器中完全可见，我想要显示块。

没有js可以吗？

Answer 1

通过使用CSS，您可以实现。

Demo

.sep{
    border:1px solid red;
    height: 50px;
    width: 280px;
    margin: 10px;
}
#container{
    min-height: 170px;
    width: 300px;
    border:1px solid green;
    padding:10px;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

Answer 2

如果您不想使用脚本，则只能将跨度div的高度更改为height: 73px;，并为#container

设置overflow : hidden

隐藏不适合容器高度的块

2 个答案: