css для , который будет изменять размер и прокручиваться вертикально

Содержание

Вопрос или проблема
Ответ или решение
CSS для элемента <div>
Объяснение стилей
Рабочий пример
HTML
CSS
Важные моменты
Заключение

Вопрос или проблема

У меня есть страница с 2 элементами. Верхний элемент изменяет размер по горизонтали с помощью значений CSS по умолчанию. Он не требует прокрутки. Он работает так, как мне нужно.

Нижний элемент должен иметь ‘resize: both’ и прокручиваться вертикально по мере необходимости. Я могу сделать так, чтобы этот элемент выполнял одно из этих действий, но не оба.

CSS для нижнего элемента, который будет прокручиваться, но не изменять размер по горизонтали:

.div2 {
    width: <?= $winwid ?>;
    height: <?= $winwht ?>;
    background-attachment: scroll;
    resize: both;
    overflow: scroll;
    border-style: none;
    overflow-y: scroll;
    }

Две переменные PHP передаются через <form type=”POST”> от вызывающей стороны следующим образом:

    document.forms[0].winwid.value = window.innerWidth;
    document.forms[0].winht.value = window.innerHeight;

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

Спасибо за любую помощь.

Рон

Ваш CSS для .div2 выглядит хорошо, он должен быть в состоянии изменяться в размере (resize: both) и прокручиваться вверх/вниз (overflow: scroll) без проблем.

Однако, так как это не так, вероятнее всего, проблема в чем-то другом.

Поэтому я предлагаю добавить position: relative к .div2. Это должно помочь уменьшить нежелательные взаимодействия с другими элементами.

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

Примечание: Установка как overflow: scroll, так и overflow-y: scroll кажется избыточной. Просто overflow: scroll на самом деле было бы достаточно.

Ответ или решение

Чтобы обеспечить возможность вертикальной прокрутки и при этом позволить элементу <div> изменять размер, вам необходимо правильно настроить CSS-стили. На основании предоставленной информации и вашей текущей реализации .div2, вот полное решение.

CSS для элемента `<div>`

.div2 {
    width: 100%; /* или используйте фиксированное значение, если необходимо */
    max-width: <значение>; /* максимальная ширина, если необходимо ограничить */
    height: <значение>; /* начальная высота */
    background-attachment: scroll;
    resize: both; /* разрешает изменение размера по обеим осям */
    overflow-y: auto; /* позволяет вертикальную прокрутку при необходимости */
    overflow-x: hidden; /* отключает горизонтальную прокрутку */
    border: none; /* убирает границы, если они были заданы */
    position: relative; /* относительно родителя для лучшей компоновки */
}

Объяснение стилей

width: 100%; – Эта установка позволит элементу занимать всю доступную ширину. Если вам нужно ограничить ширину, вы можете установить max-width с чётким значением.
height: <значение>; – Вы задаете начальную высоту для элемента, но он будет изменять размер при помощи резайзера.
resize: both; – Это свойство позволяет изменять размер элемента как по горизонтали, так и по вертикали.
overflow-y: auto; – Позволяет вертикальную прокрутку только тогда, когда содержимое превышает высоту контейнера.
overflow-x: hidden; – Отключает горизонтальную прокрутку, чтобы предотвратить нежелательные полосы прокрутки.
position: relative; – Это свойство помогает предотвратить нежелательное взаимодействие с другими элементами на странице.

Рабочий пример

HTML

<div class="parent">
    <div class="top-div">Содержимое верхнего блока</div>
    <div class="div2">
        <!-- Здесь будет содержимое, которое требует прокрутки -->
    </div>
</div>

CSS

Добавьте следующие стили для родительского элемента, чтобы гарантировать правильную компоновку:

.parent {
    display: flex;
    flex-direction: column;
    height: 100vh; /* высота родителя равно высоте окна */
    overflow: hidden; /* отключает прокрутку родителя */
}

Важные моменты

Убедитесь, что высота .div2 и родительского элемента правильно настроены. Если родительский элемент имеет фиксированную высоту, это поможет контролировать высоту, занимаемую дочерними элементами.
Убедитесь, что вы не применяете дополнительные CSS-свойства, которые могут конфликтовать с резайзером или прокруткой.

Заключение

С правильно настроенными стилями <div> с классом .div2 будет иметь возможность как изменять размер, так и прокручиваться вертикально по мере необходимости, без ненужной прокрутки страницы. Если эти изменения не решают проблему, пожалуйста, проверьте структуру HTML и другие применяемые стили, так как они могут влиять на поведение элемента.