隐藏不适合固定大小容器的块 [英] Hide blocks that does not fit a fixed size container
问题描述
我有一个固定大小的容器，包含不同高度的块的垂直列表。
所以假设这样：
#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块剪辑：
（当简单地使用overflow：隐藏在容器上）
+ ----- -------- +
| |
| + ------- + |
| | A | |
| + ------- + |
| |
| + ------- + |
| | B | |
| + ------- + |
| |
| + ------- + |
| | C | |
+ ------------- +
，块C和D应隐藏如下：
+ ------------- +
| |
| + ------- + |
| | A | |
| + ------- + |
| |
| + ------- + |
| | B | |
| + ------- + |
| |
| |
+ ------------- +
如何我这样做？
我的申请是我有一个全屏浏览器窗口（在数字标牌应用程序中）显示最新消息。
一个类似的问题，但是没有可行的解决方案：
隐藏与容器高度不匹配的块
谢谢。
我可以想象一个解决方案的唯一方法是通过JavaScript。 CSS本身没有帮助。
这里是你的小提琴的更新： http://jsfiddle.net/bukfixart/TSCzS/1/
此片段选择所有剪辑元素并隐藏它们。
$（'。inner'，'#container'）filter（function（）{
return $（' ）.offset（）。top + $（'＃container'）。height（）< $（this）.offset（）。top + $（this）.height（）;
}）hide ）;
对于此解决方案，您需要使用jQuery
< hr>
编辑：
对于所有纯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; / *从width + padding到外部容器宽度的差值的一半* /
top：-35px; / *从高度+填充到外部容器高度的差值的一半* /
-webkit-transform：rotate（90deg）;
}
.outer {
float：left;
height：202px; / *内框宽度+边框* /
width：52px; / *内框的高度+边框* /
margin：10px 10px 10px 0px;
line-height：200px; / *内框的宽度* /
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; / *宽度和高度之差的一半* /
}
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.
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 */
}
这篇关于隐藏不适合固定大小容器的块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
