Я хочу, чтобы в контейнере с содержимым начальной загрузки было два контейнера, один с фиксированной высотой и один с процентом

Question

У меня есть некоторые проблемы, связанные с тем, как запрограммировать адаптивный блок "контента" из начальной загрузки. Как в показанной JsFiddle-Link, я хочу сделать внутреннюю часть Bootstrap content-inner отзывчивый.

Во внутреннем окне контента у меня есть

• один div с фиксированной шириной (красный)

• второй контейнер (article Контейнер) - это контейнер, который должен занимать оставшееся пространство на странице (чтобы высота увеличивалась, белый фон должен увеличиваться, а верхнее и нижнее серое пространство уменьшаться). Этот контейнер также имеет переполнение-y, но переполнение-x скрыто из-за полосы прокрутки справа, а внизу также будет полоса прокрутки. (зеленый)

• и третий тоже имеет фиксированную ширину (синий)

Внимание на пространство сверху и снизу, должно быть место.

Я действительно не знаю так много методов для реализации / решения этой проблемы.
Поэтому я искал методы реализации и нашел функцию CSS Calc(). Правда ли, что эта "функция" просто экспериментальная? Я проверил это с помощью этой функции, но я не получил успешный результат, поэтому я не знаю больше методов.

Мои проблемы, возникшие при тестировании для решения этой проблемы, заключались в том, что белый фон внутреннего блока содержимого, в котором находится весь контент, исчез: /
Я пытался это исправить с помощью класса Bootstrap clearfix но мне не удалось.

Так есть ли у вас решение о том, как решить эту проблему?

Спасибо за все полезные результаты и ответы, и спасибо за любую помощь.:)

Answer 1

Я не на 100% полностью понимаю ваш вопрос, но если вы хотите, чтобы элементы над и под статьей имели фиксированную высоту, а прокручиваемая статья реагировала на разную высоту области просмотра, вот решение этой проблемы (обратите внимание, что я не смог найти где вы устанавливаете точную высоту для поля "красный" и "синий"):

.height-450 {
  overflow: auto;
  height: calc(80vh - 100px - 200px);
}

"100px" будет заданной фиксированной высотой красного прямоугольника, а "200px" будет заданной фиксированной высотой синего прямоугольника. "vh" означает "высота области просмотра", где "100vh" - вся высота. И вы можете использовать другие единицы, кроме vh и px.

Вы можете управлять верхним и нижним серым пространством либо с преднамеренной высотой, либо просто убедиться (с помощью заданного кода), что внутреннее содержимое никогда не займет всю высоту области просмотра. Обратите внимание, что последний будет держать все внутри данного окна просмотра, так что весь контент всегда виден.

PS Обратите внимание, что многие ваши CSS могут быть заменены стандартными классами Bootstrap.

И CSS calc () https://www.w3schools.com/cssref/func_calc.asp широко поддерживается https://caniuse.com/