Скрыть блок, который не соответствует высоте контейнера

Question

Скрыть блок, который не соответствует высоте контейнера

0

У меня есть пример здесь 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?

Brain2xml 22 сен. 2013, в 09:16

Источник

Теги:

html

css

2 ответа

0

Если вы не хотите использовать Script, вы можете изменять высоту div div до height: 73px; и установить overflow: hidden для #container

Mahdi jokar 22 сен. 2013, в 06:28

Ещё вопросы

Syed Azam · Accepted Answer · 2013-09-22T06-19-00.000Z

С помощью CSS вы можете достичь.

демонстрация

.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;
}

ваша скриптовая ссылка не работает.