У меня есть контейнер с фиксированным размером, содержащий вертикальный список блоков различной высоты. Я хотел бы скрыть все блоки, которые не полностью помещаются в контейнер.
Итак, предполагая что-то вроде этого:
#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 | |
| +-------+ |
| |
| |
+-------------+
Как я могу это сделать?
Мое приложение для этого состоит в том, что у меня есть полноэкранное окно браузера (в приложении для цифровых вывесок), показывающее "последние новости". У блоков нет устройств ввода, поэтому прокрутка невозможна.
Аналогичный вопрос, но без рабочего решения: Скрыть блок, который не соответствует высоте контейнера
Благодарю.
Единственный способ представить решение - через 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 */
}