このオーバーフローコンテンツを正しく非表示にする方法

$('.child_1').click(function(){ 
 
    $(this).toggleClass('left').siblings().toggleClass('left'); 
 
});

* {box-sizing: border-box;} 
 
.parent { 
 
    width: 500px; 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
    overflow: hidden; 
 
} 
 
.child_1 { 
 
    background-color: rgba(255,255,0,.6); 
 
    width: 100%; 
 
    float: left; 
 
    height: 100px; 
 
    z-index: 1; 
 
    transition: all .5s; 
 
} 
 
.child_1.left { 
 
    width: 30%; 
 
} 
 
.child_2 { 
 
    width: 70%; 
 
    padding-left: 15px; 
 
    left: 100%; 
 
    transition: all .5s; 
 
} 
 
.child_2.left { 
 
    left: 30%; 
 
} 
 
.child_2 > div { 
 
    background-color: rgba(0,255,255,.6); 
 
    height: 200px; 
 
} 
 

 
.child_2 > div > div { 
 
    overflow: hidden; 
 
} 
 
.relative { 
 
    position: relative; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<p>Relative</p> 
 
<div class="parent"> 
 
    <div class="child_1"></div> 
 
    <div class="child_2 relative"> 
 
    <div>Content of child_2<div></div></div> 
 
    </div> 
 
</div> 
 
<hr /> 
 
<p>Absolute</p> 
 
<div class="parent"> 
 
    <div class="child_1"></div> 
 
    <div class="child_2 absolute"> 
 
    <div>Content of child_2<div></div></div> 
 
    </div> 
 
</div>

私はこのトラブルが発生します。

親のdivがchild_2が親の外に移動したときにchild_2を隠すために隠されたのオーバーフローを持っている必要があります。
親divは、child_2の高さが不明であるため、宣言された高さを持つことはできません（私の例では与えられていると思われます）。

child_2のdivを非表示にするには、私は2つの方法を試してみました：

あなたが見ることができるように、child_2の内容が誤った位置まで押し込まれながら、最初の1は、比較的、child_2に配置されています。
2番目は絶対配置されたchild_2ですが、絶対配置された要素は親要素の高さを拡張できないため、親divに隠れたオーバーフロー値が与えられた場合、child_2の内容は切り捨てられます。

出典

2016-06-16 jasonxia23

正常に動作し、親のdivに高さを追加しているあなたはより多くの詳細を記入してくださいもらえますか？私はあなたの質問を三度読んで、あなたの必要条件を得られなかった。 –

@CharanKumar私は自分の問題を編集しました。 – jasonxia23

$(document).ready(function() { 
 
    $('.child_1').click(function(){ 
 
    $(this).toggleClass('left').siblings().toggleClass('left'); 
 
}); 
 
});

* {box-sizing: border-box;} 
 
.parent { 
 
    width: 500px; 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
    overflow: hidden; 
 
    height: 100px; 
 
} 
 
.child_1 { 
 
    background-color: rgba(255,255,0,.6); 
 
    width: 100%; 
 
    float: left; 
 
    height: 100px; 
 
    z-index: 1; 
 
    transition: all .5s; 
 
} 
 
.child_1.left { 
 
    width: 30%; 
 
} 
 
.child_2 { 
 
    width: 70%; 
 
    padding-left: 15px; 
 
    left: 100%; 
 
    transition: all .5s; 
 
} 
 
.child_2.left { 
 
    left: 30%; 
 
} 
 
.child_2 > div { 
 
    background-color: rgba(0,255,255,.6); 
 
    height: 200px; 
 
} 
 

 
.child_2 > div > div { 
 
    overflow: hidden; 
 
} 
 
.relative { 
 
    position: relative; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="sample.css"> 
 
</head> 
 

 
<body style="display:table"> 
 
    <p>Relative</p> 
 
    <div class="parent"> 
 
     <div class="child_1"></div> 
 
     <div class="child_2 relative"> 
 
      <div>1 
 
       <div></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <hr /> 
 
    <p>Absolute</p> 
 
    <div class="parent"> 
 
     <div class="child_1"></div> 
 
     <div class="child_2 absolute"> 
 
      <div>1 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
</body> 
 

 
</html>

私は、オーバーフローが

出典

2016-06-16 06:15:16 Shivani

child_2の高さが不明なため、親divの高さを宣言することはできません（私の例では与えられていますが）。 – jasonxia23

オーバーフロープロパティを有効にするには、ブロックレベルのコンテナにバウンディングハイト（高さまたは最大高さ）を指定するか、空白をnowrapに設定する必要があります。 – Shivani

また、宣言できないときに高さを計算してスクリプトで動的に設定できるかもしれません。 –

このオーバーフローコンテンツを正しく非表示にする方法

答えて

関連する問題