Высота деления в зависимости от содержания - PullRequest
Новая
       35

Высота деления в зависимости от содержания

0 голосов
/ 27 мая 2019

Я работаю над модалом с фиксированным верхним и нижним колонтитулами.

Вот пример Jsfiddle

В настоящее время высота класса scrollable-stuff составляет 80%.Если содержимое меньше и прокрутка отсутствует, мне нужно уменьшить высоту и взять высоту содержимого.

Например, В этом примере содержит меньше содержимого, а скроллер отсутствует.но есть пустое место.Мне нужно взять высоту содержимого в случае, если нет прокрутки.

Буду признателен за любую помощь или предложение

Спасибо заранее.

Ответы [ 3 ]

1 голос
/ 27 мая 2019

Вместо использования height: 300px;

вы можете использовать max-height: 300px;

Поскольку max-height сообщает браузеру, что высота может быть меньше, если содержимое меньше, но не больше, чемуказанная высота, которая в вашем случае составляет 300px.

1 голос
/ 27 мая 2019

В этих случаях мне нравится использовать направление колонки flexbox. Идея здесь состоит в том, чтобы иметь фиксированные высоты для нижнего колонтитула и верхнего колонтитула, а затем заставить содержимое взять остальное с помощью flex-based: 100% и flex-grow: 1 .

Прежде всего удалите встроенный стиль style = "width: 600px; высота: 300px , так как это противоречит этому решению, затем добавьте класс в ваш модал. Для примера ниже я выбрал "myModal" и в качестве примечания используйте overflow: auto , чтобы избежать полос прокрутки там, где не хватает контента. Это решение также обрабатывает стиль по умолчанию, который поставляется с fancybox.

Пример 

$(document).ready(function() {

   $("#ModalPopup").fancybox({}).trigger('click');

});
.title-div {
  min-height: 32px;
}

.scrollable-stuff {
  overflow-y: auto;
  flex-grow: 1;
  flex-basis: 100%;
}

.button-div {
  min-height: 32px;
}

.myModal {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<div id="ModalPopup" class="myModal">

  <div class="title-div">Title</div>

  <div class="scrollable-stuff">

    <h1>For Your Information</h1>
   
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p> 
    <p>Here is some text to fill out this space.</p> 
    <p>Here is some text to fill out this space.</p> 
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
    <p>Here is some text to fill out this space.</p>
  </div>

  <div class="button-div">
    <button type="button" class="btn-primary">Click</button>
  </div>
</div>
0 голосов
/ 27 мая 2019

Похоже, что модальная высота регулируется этим встроенным стилем:

<div id="ModalPopup" style="width:600px;height:300px;">

Эта фиксированная высота - то, что вызывает отсутствие реакции на высоту вашего модала. Чтобы исправить это, удалите height:300px;, хотя вам также может понадобиться выяснить, где он установлен и изменить его там. Аналогичное решение может работать и для фиксированной ширины.

Выглядит также, как будто есть y-scrollbar, вам просто нужно перейти по x-scroll:)

...