Hide blocks that does not fit a fixed size container - html

Question

I have a container of a fixed size, containing a vertical list of blocks of varying heights .
I would like to hide all blocks that does not fit completely within the container.
So assuming something like this:
#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>
(See: http://jsfiddle.net/TSCzS/)
I get something like this:
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| +-------+ |
+--| C |--+
+-------+
+-------+
| D |
+-------+
I do not want to just have the C block clipped:
(as when simply using overflow:hidden on the container)
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| +-------+ |
| | C | |
+-------------+
but instead, the blocks C and D should be hidden like this:
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| |
+-------------+
How can I do this?
My application for this is that I have a full screen browser window (in a digital signage application) showing the "latest news". The units have no input devices, so scrolling is not possible.
A similar question, but without a working solution:
Hide block which does not fit container height
Thanks.

Answer 1

The only way I can imagine a solution is via JavaScript. CSS itself wont help.
Here's an update of your fiddle: http://jsfiddle.net/bukfixart/TSCzS/1/
This snippet selects all clipping elements and hides them.
$('.inner', '#container').filter(function() {
return $('#container').offset().top + $('#container').height() < $(this).offset().top + $(this).height();
}).hide();
For this solution you need to use jQuery
edit:
For all the pure CSS enthusiasts ;-)
http://jsfiddle.net/bukfixart/CfMer/
I tried a solution without javascript and used css3 transformations instead. Therefore some markup changes are necessary
<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>
And here's the a little bit stranger style code
#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 */
}