Question

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

假设有这样的事情：

#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

感谢。

Answer 1

我能想象解决方案的唯一方法是通过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 */
}

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

1 个答案: