请在缩放窗口固定柔性物品

问题描述 投票：0回答：2

我工作的一个Web应用程序，我需要用CSS帮助。我是一个初学者在CSS所以请多多包涵。

我试图风格应用程序的固定侧边栏。侧边栏占据了浏览器窗口的整个高度。整个侧边栏是柔性盒和柔性儿童嵌套柔性盒为好。

目前，柔性孩子一起浏览器窗口移动，同时降低了视高度，所以菜单链接推（但头像和用户名元素保持不变？）。

我不希望这种事情发生。父容器内的菜单项应会被切去（而不是与浏览器窗口一起移动），并且用户可以向下滚动查看剩余的菜单项（如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>
html css css3 flexbox
2个回答
0
投票

只是包装.sidebar__profile在另一个DIV，因此它可以作为一个块元素，而不是萎缩的柔性元素作用...

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
投票

尝试包裹菜单项在自己的容器，使该容器滚动功能，并禁止在型材萎缩。

添加到您的代码：

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

revised jsfiddle demo

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.