Как сохранить фиксированную часть веб-страницы?

Question

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

Inцифры, к которым я стремлюсь, примерно такие: На рисунке выше вы видите мою главную страницу.Правый контент можно прокручивать, а при его прокрутке левый контент остается фиксированным.Внизу страницы я все еще вижу левый контент, как на следующем рисунке: Есть ли способ, которым я могу этого достичь?Я занимаюсь разработкой с использованием Angular и Bootstrap, но я также использую собственный CSS.

Answer 1

Вы можете использовать flexbox / css grid или загрузочную сетку для рисования основного макета и можете использовать код

.left-container{
   position: fixed;
   top: 0; 
   right: 0;
}

для лучшего понимания, пожалуйста, просмотрите свойства позиции css

В случае, если вы правыпанель искажается, как только вы помещаете фиксированное положение в левый div, вы можете сделать что-то вроде этого:

 .side-bar{
    width: 20%;
    height: 550px;
    border-right: 2px solid black;
    position: fixed;
}

.main{
    width: 80%;
    height: 550px;
    margin-left: 20%;
}

Поместите поле слева от основного / правого div на ширину левой панели, как у меня ширина боковой панели как20%, поэтому я поместил поле слева от основного div на 20%

Answer 2

Чтобы исправить ваш контейнер, используйте position:fixed

здесь - это проект, который я сделал, который имеет фиксированную позицию слева.

Answer 3

Попробуйте:

HTML

<div class="image-container">
  //add your html code here
</div>

CSS

.image-container {
   position: fixed;
   top: 0; 
   right: 0;
   display: block;
 }