1

Я пытаюсь полностью скрыть дочерние div при переполнении родителя по высоте. 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/

В данном примере — у родителя установлено свойство overflow-y: hidden, но оно скрывает только ту часть div, которая не влезает в родителя. А как сделать, чтобы дочерний div скрывался полностью? В данном примере Message 5 должен исчезнуть полностью.

5
  • 1
    Напишите скрипт. Через стили это невыполнимая задача 8 сен 2016 в 4:45
  • Соглашусь, нужно писать скрипт. Смотреть, для какого дочернего контейнера не хватает места и прятать его. 8 сен 2016 в 5:14
  • Создайте класс песевдо last child и примените к нему visible hiden или display none
    – Andrey
    8 сен 2016 в 5:18
  • @Andrey и как вы собираетесь применять этот класс по условию? Ведь это основная задача для вопрошающего
    – VenZell
    8 сен 2016 в 5:22
  • 1
    @Andrey и почему только :last-child? Ведь не помещаться в контейнер может не только один последний элемент 8 сен 2016 в 5:35

1 ответ 1

1

В целях демонстрации в примере ниже используется overflow-y: scroll;.
Скрываются все элементы, лежащие за пределами первого экрана внутри блока.

$('#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>

Основано на ответе к вопросу "Get height of visible portion of div"

5
  • Эх. Не успел :) 8 сен 2016 в 6:05
  • Что-то ваш вариант многовато скрывает. Попробуйте высоту контенера 187px 8 сен 2016 в 6:16
  • @tutankhamun, увеличил, функционирует так же.
    – VenZell
    8 сен 2016 в 6:30
  • Спасибо! Я хотел убедиться что средствами чистого CSS этого сделать точно нельзя.
    – Fr1ar
    8 сен 2016 в 8:32
  • @VenZell У меня если раскрыть результат на всю страницу, видно однипиксельную линию от Message 4, но скрывается и Message 3, который отображается полностью. Firefox 47 Linux. 8 сен 2016 в 8:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.