I'm trying to completely hide child divs when the parent overflows in height. HTML:

* { margin: 0; } .chat { position: relative; overflow-y: hidden; height: 300px; background-color: #ff99ff; padding: 5px; } .message { position: relarive; background-color: #99ff99; margin: 5px; width: 100%; } 
 <div class="chat"> <div class="message"> <p>Message 1: String 1</p> <p>Message 1: String 2</p> </div> <div class="message"> <p>Message 2: String 1</p> <p>Message 2: String 2</p> <p>Message 2: String 3</p> <p>Message 2: String 4</p> </div> <div class="message"> <p>Message 3: String 1</p> <p>Message 3: String 2</p> <p>Message 3: String 3</p> </div> <div class="message"> <p>Message 4: String 1</p> <p>Message 4: String 2</p> <p>Message 4: String 3</p> </div> <div class="message"> <p>Message 5: String 1</p> <p>Message 5: String 2</p> <p>Message 5: String 3</p> <p>Message 5: String 4</p> </div> </div>

http://jsfiddle.net/34guhp7z/

In this example, the parent has the overflow-y: hidden property set, but it hides only the part of the div that does not fit into the parent. And how to make the child div hide completely? In this example, Message 5 should disappear completely.

  • one
    Write a script. Through styles, this is an impossible task - tutankhamun
  • I agree, you need to write a script. See for which child container there is not enough space and hide it. - Darina Goodwill
  • Create a class peshevdo last child and apply visible hiden or display none to it - Andrey
  • @Andrey and how are you going to apply this class by condition? After all, this is the main task for the questioner - VenZell
  • one
    @Andrey and why only :last-child ? After all, not only one last element can fit in a container - tutankhamun

1 answer 1

For purposes of demonstration, the example below uses overflow-y: scroll; .
All elements lying outside the first screen inside the block are hidden.

 $('#hide').on('click', function() { var chat = $("#chat"); $('.message').each(function() { var that = $(this); var visibleHeight = chat.height() + chat.offset()['top'] - that.offset()['top']; var trueHeight = that.height(); if (visibleHeight < trueHeight) { that.hide(); } }); }); $('#show').on('click', function() { $(".message[style]").show(); }); 
 * { margin: 0; } #chat { position: relative; overflow-y: scroll; height: 187px; background-color: #ff99ff; padding: 5px; } .message { position: relarive; background-color: #99ff99; margin: 5px; width: 100%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="hide">Скрыть обрезанные блоки</button> <button id="show">Показать обрезанные блоки</button> <div id="chat"> <div class="message c1"> <p>Message 1: String 1</p> <p>Message 1: String 2</p> </div> <div class="message c2"> <p>Message 2: String 3</p> <p>Message 2: String 4</p> <p>Message 2: String 5</p> <p>Message 2: String 6</p> </div> <div class="message c3"> <p>Message 3: String 7</p> <p>Message 3: String 8</p> <p>Message 3: String 9</p> </div> <div class="message c4"> <p>Message 4: String 10</p> <p>Message 4: String 11</p> <p>Message 4: String 12</p> </div> <div class="message c5"> <p>Message 5: String 13</p> <p>Message 5: String 14</p> <p>Message 5: String 15</p> <p>Message 5: String 16</p> </div> </div>

Based on the answer to the question " Get height of visible portion of div "

  • Eh. Do not have time :) - tutankhamun
  • Something your option hides a bit too much. Try counterweight height 187px - tutankhamun Sept
  • @tutankhamun, augmented, functions the same. - VenZell
  • Thank! I wanted to make sure that using pure CSS could not do this for sure. - Fr1ar
  • @VenZell If I expand the result to the whole page, I can see the one-pixel line from Message 4 , but also hiding Message 3 , which is displayed completely. Firefox 47 Linux. - tutankhamun