调整窗口大小时保持弹性项目固定 [英] Keep flex items fixed while resizing window

查看：37
本文介绍了调整窗口大小时保持弹性项目固定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发一个网络应用程序，我需要 css 方面的帮助.我是 css 初学者，请多多包涵.

我正在尝试为应用设置固定侧边栏的样式.侧边栏占据浏览器窗口的整个高度.整个侧边栏是一个 flex 框，并且 flex 子项也是嵌套的 flex 框.

目前，flex 子元素随着浏览器窗口移动，同时降低视口高度，因此菜单链接被向上推(但头像和用户名元素保持固定?！).

我不希望这种情况发生.父容器内的菜单项应该被剪切(而不是随着浏览器窗口移动)，用户可以向下滚动以查看剩余的菜单项(例如 youtube 网站上的侧边栏).

为了便于参考，这里是当前结果和我真正想要的 imgur 链接:https://imgur.com/a/VShsF6o

此外，滚动条在出现时似乎占据了额外的宽度.有没有办法阻止这种行为?

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

html {背景颜色:#141E30；边距:0；填充:0；}.侧边栏{显示:弹性；弹性方向:列；宽度:300px；顶部:0；底部:0；位置:固定；溢出:自动；背景:#0a0c0f；颜色:#EAE9E9；}.sidebar__profile {填充:16px；显示:弹性；弹性方向:列；对齐项目:居中；}.sidebar__menuitem {填充底部:10px；显示:弹性；对齐项目:居中；弹性收缩:0；高度:30px；}.数数 {左边距:自动；右边距:20px；边框半径:6px；填充:2px 5px；背景颜色:#EAE9E9；颜色:#0a0c0f；}

<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">用户名</div>
<div class="sidebar__menuitem"><div>菜单项 1</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 2</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 3</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 4</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 5</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 6</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 7</div><div class="count">2</div>

解决方案

只需将 .sidebar__profile 包装在另一个 div 中，这样它就可以充当块元素而不是收缩的弹性元素...

html {背景颜色:#141E30；边距:0；填充:0；}.侧边栏{显示:弹性；弹性方向:列；宽度:300px；顶部:0；底部:0；位置:固定；溢出:自动；背景:#0a0c0f；颜色:#EAE9E9；}.sidebar__profile {填充:16px；显示:弹性；弹性方向:列；对齐项目:居中；}.sidebar__menuitem {填充底部:10px；显示:弹性；对齐项目:居中；弹性收缩:0；高度:30px；}.数数 {左边距:自动；右边距:20px；边框半径:6px；填充:2px 5px；背景颜色:#EAE9E9；颜色:#0a0c0f；}

<头><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>title</title><身体><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">用户名</div>

<div class="sidebar__menuitem"><div>菜单项 1</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 2</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 3</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 4</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 5</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 6</div><div class="count">2</div>

<div class="sidebar__menuitem"><div>菜单项 7</div><div class="count">2</div>

</html>

I am working on a web app and I need help with css. I am a beginner at css so please bear with me.

I'm trying to style a fixed sidebar for an app. The sidebar occupies the full height of the browser window. The whole sidebar is a flex box and the flex children are nested flex boxes as well.

Presently, the flex children move along with the browser window while reducing the viewport height and so the menu links get pushed up (but the avatar and username element remain fixed?!).

I don't want this to happen. The menu items inside the parent container should get clipped (instead of moving along with the browser window) and the user can scroll down to view the remaining menu items (like the sidebar on the youtube website for example).

For easy reference, here is the imgur link of what is current result and what I actually want: https://imgur.com/a/VShsF6o

Also, the scroll bar seems to take up extra width while appearing. Is there any way to stop that behavior?

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>

解决方案

Just wrap .sidebar__profile in another div so it can act as a block-element rather than a shrinking flex-element...

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>

这篇关于调整窗口大小时保持弹性项目固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆