Блог

Главная - Вопросы по программированию - Как можно применить ограничения для управления размерами фиксированного положения, центрированного DIV с переменным содержимым?

Как можно применить ограничения для управления размерами фиксированного положения, центрированного DIV с переменным содержимым?

#html #css #responsive-design

Вопрос:

Основной код прост:

CSS

 .pop {
  position: fixed ;
  top: 50%;     left: 50%;
  transform: translate(-50%, -50%);
  background-color: yellow ; }

HTML

 <body>
  <div class="pop">some variable text.</div>
</body>

ПОВЕДЕНИЕ

div.pop расширяется, чтобы поместить его содержимое в прямоугольник, который в окне просмотра шириной 915 пикселей имеет максимальную ширину 457,5 пикселей и максимальную высоту 100%.

Если видовое окно уменьшено, «поля» появляются с обеих сторон div.pop , каждое из которых занимает около четверти ширины видового окна.

Продолжая уменьшать ширину окна просмотра, ширина div.pop затем уменьшается. После того, как он уменьшился до ширины самого большого слова, доля «полей» начинает уменьшаться, пока они не исчезнут, а div.pop содержимое «переполнит» окно просмотра.

ЦЕЛЬ и ПРОБЛЕМА

Я хочу иметь фиксированное положение, центрированный DIV, который не превышает, например, 95% видового экрана или 30em, в зависимости от того, что меньше, и который в идеале сжимается, чтобы соответствовать содержимому меньше этого, с минимальной шириной 10em. Мне нужно контролировать поведение (выше), чтобы сделать это, но я не смог найти им объяснения.

подходы

Я не могу найти комбинацию min-width , max-width , и width это достигает цели. min-width достигается минимальное требование к ширине, но, похоже, ничто не отменяет «поля» и поведение максимальной ширины div.pop .

Использование display:table-row; и display:table-cell; , похоже, не имеет никакого эффекта, предполагая, что максимальная ширина и «поля» div.pop не являются результатом анонимных ячеек.

Из-за удаления всего кода, кроме приведенного здесь, похоже, что «проблема» возникает из-за внутреннего набора поведения. Я не смог найти определения этим понятиям или способа, которым их можно контролировать.

Включение/исключение css сброса Майерса не имеет никакого эффекта, поэтому предустановки браузера, похоже, не задействованы.

Инспектор FF отображает ширину div.pop экрана во всплывающем окне, связанном с ним; эта ширина также отображается на панели «Модель коробки», но для нее не указана вычисленная ширина и не указаны какие-либо правила, касающиеся этого.

вопрос

Как вычисляются размеры div.pop и генерируется поведение, и как этим можно управлять для достижения описанной цели?

Комментарии:

1. Вы пробовали использовать функции CSS, такие как minmax , min , или max ?

2. Спасибо @AlphaHowl, я посмотрел на них и clamp , но мне нужно решение для работы на старых устаревших устройствах 🙁

Ответ №1:

Попробуйте использовать max-width и задать медиа-запрос:

 .pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: yellow ;
  width: 30em;
  min-width: 10em;
  }
@media (max-width: 30em) {
  .pop {
    max-width: 95%;
  }
}

Если вам нужно что-то более продвинутое, попробуйте использовать calc (ссылка).

Комментарии:

1. Спасибо @user3236756 и @Dharman Ваш ответ демонстрирует часть проблемы: min-width не сжимается до содержимого, когда width указанное значение имеет большее значение. Насколько я понимаю calc , он генерирует значение для свойства CSS, но не изменяет это свойство каким-либо другим способом.

Метки: ,