Блог

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

Как принудительно переместить div в верхнюю/нижнюю часть окна просмотра, не выводя его из потока документов?

#css #flexbox #css-position

Вопрос:

Мне интересно, как я могу заставить синий div «прилипать» к верхней и нижней части страницы (чтобы вы не могли прокручивать его дальше), не нарушая поток документов (я не хочу, чтобы он перекрывал div содержимого). Грубая версия находится здесь, в фрагменте кода. Если я установлю на нем «абсолютный», он нарушит поток, и содержимое попадет в меню. Если я оставлю его относительным, вы можете прокрутить его дальше (я хочу, чтобы он оставался вверху: 0, внизу: 0 для полных 100 Вч с собственной прокруткой).

Есть ли что-то, чего мне не хватает? Спасибо!

 * {
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: row;
  
}

.sideNav {
  width: 100px;
  height: 100vh;
  border: 5px solid red;
}

.sidePanel {
  width: 50px;
  height: 100vh;
  border: 5px solid blue;
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 200vh;
  margin: auto;
  width: auto;
  border: 5px solid green;
} 
 <div class="main">
  <div class="sideNav">Side Nav</div>
  <div class="content">This is the content area</div>
  <div class="sidePanel">Side Panel</div>
</div>

Ответ №1:

Вы действительно не можете этого сделать, не удалив его из документооборота.

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

 .main {
  display: flex;
  flex-direction: row;
}

.sideNav {
  width: 100px;
  height: 100vh;
  border: 5px solid red;
}

.sidePanel {
  width: 50px;
  height: 100vh;
  border: 5px solid blue;
  position: fixed;  /* new */
  right: 0; /* new */
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 200vh;
  margin: auto;
  width: auto;
  border: 5px solid green;
  margin-right: 50px;  /* new */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
} 
 <div class="main">
  <div class="sideNav">Side Nav</div>
  <div class="content">This is the content area</div>
  <div class="sidePanel">Side Panel</div>
</div>

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

1. Проблема в том, что панель расширяется/сворачивается, поэтому я не уверен, как получить ширину, соответствующую анимации. Я беспокоился, что не смогу сделать это таким образом. Черт возьми.

2. Глупо ли устанавливать методы onEnter и OnExit Collapse компонента с помощью MUI? Может быть, установить child div, который растягивается до 100 вч, при этом родительский контейнер все еще «виден» повсюду? Имеет ли это смысл?

Метки: ,