html – 如何在flex布局中使用固定位置？

发布时间：2020-12-14 19:43:20 所属栏目：资源来源：网络整理

导读：我有一个带有两列的flexbox布局. 左列是固定的,而右边是可滚动的. 你怎么能这样做？看看下面的代码： #parent { display: flex;}#left { flex-grow: 1;}#left div { position: fixed; background: blue; top: 0; left: 0; height: 100vh;}#right { flex-gro

我有一个带有两列的flexbox布局.

左列是固定的,而右边是可滚动的.

你怎么能这样做？

看看下面的代码：

#parent {
  display: flex;
}
#left {
  flex-grow: 1;
}
#left div {
  position: fixed;
  background: blue;
  top: 0;
  left: 0;
  height: 100vh;
}
#right {
  flex-grow: 5;
  background: red;
  height: 300vh;
}

<div id="parent">
  <div class="child" id ="left">
    <div>
      ABC
    </div>
  </div>
  <div class="child" id ="right">
  DEF
  </div>
</div>

Fiddle

解决方法

如果我了解您的要求,您需要制作正确的滚动,左边是固定的.这可以在不使用固定位置的情况下完成.

我个人也建议不要使用固定位置,除非它是绝对必要的,因为它可能在移动设备上有一些不需要的行为,并且你放弃了非定位解决方案,如flexbox提供的好处.

html,body {
  margin: 0;
}
#parent {
  display: flex;
  height: 100vh;
}
#left {
  flex-grow: 1;
  background: blue;
}
#right {
  flex-grow: 5;
  background: red;
  overflow: auto;
}
#right div {
  height: 300vh;
}

<div id="parent">
  <div class="child" id ="left">
      ABC
  </div>
  <div class="child" id ="right">
    <div>
      DEF
    </div>
  </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!