隐藏不适合固定大小容器的块

我有一个固定大小的容器，包含不同高度块的垂直列表。我想隐藏所有不完全适合容器的块。隐藏不适合固定大小容器的块

因此，假如是这样的：

#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  | | 
| +-------+ | 
|    | 
|    | 
+-------------+

我怎样才能做到这一点？

我的应用程序是我有一个全屏浏览器窗口（在数字标牌应用程序）显示“最新消息”。这些设备没有输入设备，因此无法进行滚动。

类似的问题，但没有一个有效的解决方案： Hide block which does not fit container height

感谢。

来源

2013-11-03 User0

的JavaScript选项？ – j08691

是的，如果不是重量级的话，JavaScript是可以的。我正计划为此使用Raspberry Pi。 – User0

我可以想象一个解决方案的唯一方法是通过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/

我试着没有javascr的解决方案ipt并使用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 */ 
}

来源

2013-11-03 20:14:38 bukart

很酷，不是很重的:) 对不起，不能够upvote（我低声誉） – User0

隐藏不适合固定大小容器的块

回答

相关问题