Сохраняйте гибкие элементы фиксированными при изменении размера окна - PullRequest
Новая
       4

Сохраняйте гибкие элементы фиксированными при изменении размера окна

0 голосов
/ 04 февраля 2019

Я работаю над веб-приложением, и мне нужна помощь с CSS.Я новичок в css, поэтому, пожалуйста, потерпите меня.

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

В настоящее время гибкие дочерние элементы перемещаются вместе с окном браузера, уменьшая при этом высоту области просмотра, и поэтому ссылки в меню перемещаются вверх (но элементы аватара и имени пользователя остаются фиксированными?!).

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

Для простоты, вот ссылка imgur на то, что является текущим результатом и что я на самом деле хочу: https://imgur.com/a/VShsF6o

Кроме того, полоса прокрутки, кажется, занимает дополнительную ширину при появлении.Есть ли способ остановить это поведение?

https://jsfiddle.net/qbw1aLyz/8/

html {
  background-color: #141E30;
  margin: 0;
  padding: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 300px;
  top: 0;
  bottom: 0;
  position: fixed;
  overflow: auto;
  background: #0a0c0f;
  color: #EAE9E9;
}

.sidebar__profile {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar__menuitem {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 30px;
}

.count {
  margin-left: auto;
  margin-right: 20px;
  border-radius: 6px;
  padding: 2px 5px;
  background-color: #EAE9E9;
  color: #0a0c0f;
}
<div class="sidebar">
  <div class="sidebar__profile">
    <img src="http://chittagongit.com//images/avatar-icon/avatar-icon-4.jpg" height=50px alt="image" class="sidebar__profile__avatar" />
    <div class="sidebar__profile__name">User Name</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 1</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 2</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 3</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 4</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 5</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 6</div>
    <div class="count">2</div>
  </div>
  <div class="sidebar__menuitem">
    <div>Menu Item 7</div>
    <div class="count">2</div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Просто поместите .sidebar__profile в другой div, чтобы он мог действовать как блочный элемент, а не как сжимающийся flex-элемент ... 

html {
  background-color: #141E30;
  margin: 0;
  padding: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 300px;
  top: 0;
  bottom: 0;
  position: fixed;
  overflow: auto;
  background: #0a0c0f;
  color: #EAE9E9;
}

.sidebar__profile {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar__menuitem {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 30px;
}

.count {
  margin-left: auto;
  margin-right: 20px;
  border-radius: 6px;
  padding: 2px 5px;
  background-color: #EAE9E9;
  color: #0a0c0f;
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>title</title>
  </head>

  <body>
    <div class="sidebar">
      <div>
        <div class="sidebar__profile">
          <img src="http://chittagongit.com//images/avatar-icon/avatar-icon-4.jpg" height=50px alt="image" class="sidebar__profile__avatar" />
          <div class="sidebar__profile__name">User Name</div>
        </div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 1</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 2</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 3</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 4</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 5</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 6</div>
        <div class="count">2</div>
      </div>
      <div class="sidebar__menuitem">
        <div>Menu Item 7</div>
        <div class="count">2</div>
      </div>
    </div>
  </body>

</html>
0 голосов
/ 04 февраля 2019

Попробуйте поместить элементы меню в их собственный контейнер, назначив этому контейнеру функцию прокрутки и отключив сжатие в профиле.

Добавьте это к своему коду: 

nav {
  overflow: auto;
}
.sidebar__profile {
  align-self: center;
  flex-shrink: 0;
}

пересмотренная демоверсия jsfiddle

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

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

...