Скрыть блоки, которые не соответствуют контейнеру фиксированного размера

Question

Скрыть блоки, которые не соответствуют контейнеру фиксированного размера

0

У меня есть контейнер с фиксированным размером, содержащий вертикальный список блоков различной высоты. Я хотел бы скрыть все блоки, которые не полностью помещаются в контейнер.

Итак, предполагая что-то вроде этого:

#container{
    height: 150px;
    width: 220px;
    border:1px solid green;
    padding:10px;
    overflow: hidden;
}

.inner{
    border:1px solid blue;
    height: 50px;
    width: 200px;
    margin: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
}

<div id="container" >
    <div class="inner">A</div>
    <div class="inner">B</div>
    <div class="inner">C</div>
    <div class="inner">D</div>
</div>

(См.: http://jsfiddle.net/TSCzS/)

Я получаю что-то вроде этого:

+-------------+
|             |
|  +-------+  |
|  | A     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | B     |  |
|  +-------+  |
|             |
|  +-------+  |
+--| C     |--+
   +-------+  

   +-------+  
   | D     |  
   +-------+

Я не хочу, чтобы блок C был обрезан: (как при простом переполнении: скрытом на контейнере)

+-------------+
|             |
|  +-------+  |
|  | A     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | B     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | C     |  |
+-------------+

но вместо этого блоки C и D должны быть скрыты следующим образом:

+-------------+
|             |
|  +-------+  |
|  | A     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | B     |  |
|  +-------+  |
|             |
|             |
+-------------+

Как я могу это сделать?

Мое приложение для этого состоит в том, что у меня есть полноэкранное окно браузера (в приложении для цифровых вывесок), показывающее "последние новости". У блоков нет устройств ввода, поэтому прокрутка невозможна.

Аналогичный вопрос, но без рабочего решения: Скрыть блок, который не соответствует высоте контейнера

Благодарю.

User0 03 нояб. 2013, в 21:08

Источник

Теги:

html

css

1 ответ

Ещё вопросы

bukart · Accepted Answer · 2013-11-03T18-04-00.000Z

Единственный способ представить решение - через JavaScript. Сам CSS не поможет.

Вот обновление вашей скрипки: http://jsfiddle.net/bukfixart/TSCzS/1/

Этот фрагмент выбирает все элементы отсечения и скрывает их.

$('.inner', '#container').filter(function() {
    return $('#container').offset().top + $('#container').height() < $(this).offset().top + $(this).height();
}).hide();

Для этого решения вам нужно использовать jQuery

редактировать:

Для всех чистых энтузиастов CSS ;-)

http://jsfiddle.net/bukfixart/CfMer/

Я попробовал решение без javascript и вместо этого использовал css3. Поэтому необходимы некоторые изменения разметки

<div id="outercontainer" >
    <div id="container" >
        <div class="outer">
            <div class="inner">A</div>
        </div>
        <div class="outer">
            <div class="inner">B</div>
        </div>
        <div class="outer">
            <div class="inner">C</div>
        </div>
        <div class="outer">
            <div class="inner">D</div>
        </div>
        <div style="clear:left;"></div>
    </div>
</div>

И вот немного странный стиль кода

#outercontainer {
    width:240px;  /* container width + padding */
    height:170px; /* container height + padding */
    border:1px solid green;
}    

#container{
    height: 220px;  /* container width ^^ */
    width: 150px;   /* container height ^^ */
    padding:10px;
    overflow: hidden;

    position:relative;
    left:35px;    /* half of difference from width + padding to outer container width */
    top:-35px;      /* half of difference from height + padding to outer container height */

    -webkit-transform:rotate(90deg);
}

.outer{
    float:left;

    height:202px;  /* width of the inner box + border */
    width:52px;    /* height of the inner box + border */
    margin:10px 10px 10px 0px;
    line-height:200px; /* width of the inner box */

    vertical-align:middle;
    -webkit-transform:rotate(-90deg);
}

.inner{
    border:1px solid blue;
    height: 50px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;

    display:inline-block;
    position: relative;
    left: -75px;   /* half of difference between width and height */
}

Круто, не очень тяжеловесно :) Извините за то, что не смогу поднять голос (у меня плохая репутация)