0

さまざまな高さのブロックの垂直リストを含む、固定サイズのコンテナーがあります。コンテナ内に完全に収まらないすべてのブロックを非表示にしたいと考えています。

したがって、次のようなものと仮定します。

#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:hiddenを単純に使用する場合のように)

+-------------+
|             |
|  +-------+  |
|  | A     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | B     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | C     |  |
+-------------+

代わりに、ブロック C と D は次のように非表示にする必要があります。

+-------------+
|             |
|  +-------+  |
|  | A     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | B     |  |
|  +-------+  |
|             |
|             |
+-------------+

これどうやってするの？

これに対する私のアプリケーションは、「最新ニュース」を表示する全画面ブラウザ ウィンドウ (デジタル サイネージ アプリケーション) があることです。ユニットには入力デバイスがないため、スクロールはできません。

同様の質問ですが、実用的な解決策はありません: コンテナの高さに合わないブロックを隠す

ありがとう。

4

1 に答える 1

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 */
}
于 2013-11-03T20:14:38.410 に答える