css стиль, чтобы исправить / сместить панель ввода в левой части - PullRequest
Новая
       7

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

0 голосов
/ 09 апреля 2020

Моя страница оформляется с помощью верхнего колонтитула, нижнего колонтитула, левой панели с входами, правой панели с выходами с использованием bootstrap 4.

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

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

  • Левая панель фиксируется / плавает в верхней части окна, если высота меньше высоты окна.
  • Левая панель фиксируется / плавает в нижней части окна, если высота больше, чем высота окна.

Не уверен, что я четко сформулировал свой вопрос. Дайте мне знать для уточнения.

enter image description here

Это минимальный пример для воспроизведения моего макета. 



<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <header style="height:100px;background-color:#ffd800"></header>
  <div class="container">
    <div class="row">
      <div class="col-4" style="background-color:#00ff21;min-height:500px;height:1000px;">
      </div>

      <div class="col-8" style="background-color:#00ffff;min-height:1000px;height:3000px;">
      </div>
    </div>
  </div>
  <footer style="height:100px;background-color:#b6ff00"></footer>
</body>

</html>

1 Ответ

1 голос
/ 09 апреля 2020

Вы можете использовать что-то вроде этого: 

.col-4 {
  position: sticky !important;
  top: 0px;
  left: 0;
  height: 200px;
}

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

Обратите внимание, что я использовал important для переопределения вашего встроенного стиля.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...