可滚动可弯曲的多种背景颜色-Multiplebackgroundcolorsinscrollableflexbox

作者：小蚊子 | 来源：互联网 | 2023-05-18 19:12

Ihaveaflexbox(flex-direction:row)with2columnsofcontentandafixedheight.Iwanttheleft

I have a flexbox (flex-direction: row) with 2 columns of content and a fixed height. I want the left and right column to have a red and blue background respectively. If either of the columns overflow, the flexbox's scrollbar appears (the overflowed part is still red/blue). If a column's content height is less than the flexbox's height, the space below should still be red/blue.

我有一个有两栏内容和固定高度的弹性(弹性方向:行)。我希望左栏和右栏分别有红色和蓝色背景。如果任一列溢出，flexbox的滚动条就会出现(溢出部分仍然是红色/蓝色)。如果一个列的内容高度小于flexbox的高度，下面的空间仍然应该是红色/蓝色的。

Without using gradient colors or Javascript, how can I achieve this effect?

不使用渐变颜色或Javascript，如何实现这种效果?

Demo (I want the gray part to be blue):

演示(我希望灰色部分是蓝色的):

#c1 {
  background-color: gray;
  display: flex;
  height: 200px;
  overflow-y: auto;
  align-items: baseline;
}
#left {
  flex: 1;
  background-color: red;
}
#right {
  flex: 1;
  background-color: blue;
}


    
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
    
    
      line

EDIT

Methods that don't work:

不工作的方法:

Setting align-items: stretch: overflowed part will be gray
设置对齐项:拉伸:溢出部分为灰色
Add a position: absolute div that overlays the flexbox, solely for the background: this div will have the wrong width if the scrollbar is visible.
添加一个位置:覆盖flexbox的绝对div，仅用于背景:如果滚动条是可见的，那么这个div的宽度将会是错误的。

5 个解决方案

#1

When you fix height for parent and using display flex, the height of children is auto fit to height parent. So in this case, you need to use js to change the height of children. If you don't want to use js, you just do as bellow:

当您为父级设置高度并使用显示flex时，子级的高度将自动适合于父级高度。在这种情况下，你需要用js来改变子结点的高度。如果你不想用js，那就用bellow:

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
  
}
#left {
  background-color: red;
}
#right {
  background-color: blue;
}
#left, #right{
  display:table-cell;
  width:200px;
}


    
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
    
    
      line

#2

I think it would be easier to use display: table; for your container, and display: table-cell; for your columns. The elements acting like tables, you can obtain the rendering you want.

我认为使用display: table会更容易;用于容器和显示:table-cell;为你的列。元素的作用类似于表，您可以获得您想要的呈现。

I had to add another container thought, due to the fact that you cannot limit the height of a table so easily.

我不得不添加另一个容器的想法，因为你不能如此轻易地限制一个表的高度。

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
}

.table {
  display: table;
  width: 100%;
}

#left {
  background-color: red;
}
#right {
  background-color: blue;
}

#left, #right {
  display: table-cell;
  width: 50%;
}


  
    
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
    
    
      line

#3

Wrap left and right div with another div, set display flex and min-height:min-content for that div. also set height 100% for left and right div.

用另一个div包装左div和右div，设置显示flex和min-height:min-content for that div。

    #c1 {
      background-color: gray;
      display: flex;
      height: 200px;
      overflow-y: auto;
    }

#wrap{
  display:flex;
  width:100%;
  min-height:min-content;
}
#left {
  flex: 1;
  background-color: red;
  height:100%;
}
#right {
  flex: 1;
  background-color: blue;
  height:100%;
}

   

 
      
        
          line
          line
          line
          line
          line
          line
          line
          line
          line
          line
          line
          line
          line
          line
        
        
          line

#4

Working from Nithin Charly's answer, I got this:

根据尼辛·查理的回答，我得到了这个:

(doesn't work properly in IE due to bugs)

(IE因bug无法正常工作)

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
}

#wrap {
  display: flex;
  min-height: 100%;
  align-items: stretch;
}

#left {
  flex: 1;
  background-color: red;
}

#right {
  flex: 1;
  background-color: blue;
}


  
    
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
    
    
      line

#5

-1

The problem is with align-items: baseline. You can just leave that out or replace it with stretch and you'll get what you're after.

问题是align-items: baseline。你可以把它放出来，或者用拉伸来代替它，然后你就会得到你想要的。

#c1 {
  background-color: gray;
  display: flex;
  height: 200px;
  overflow-y: auto;
  /* align-items: baseline; */

}
#left {
  flex: 1;
  background-color: red;
}
#right {
  flex: 1;
  background-color: blue;
}


    
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
      line
    
    
      line

推荐阅读

default
JS兼容总结及解决方法

本文总结了在编写JS代码时，不同浏览器间的兼容性差异，并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]

蜡笔小新 2023-12-09 17:31:06
text
如何在HTML中获取鼠标的当前位置

本文介绍了在HTML中获取鼠标当前位置的三种方法，分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]

蜡笔小新 2023-12-11 13:04:00
text
Cocos2dx学习笔记（14）更新函数scheduleUpdate、进度计时器CCProgressTo、滚动视图CCScrollView

本文介绍了Cocos2dx学习笔记中的更新函数scheduleUpdate、进度计时器CCProgressTo和滚动视图CCScrollView的用法。详细介绍了scheduleUpdate函数的作用和使用方法，以及schedule函数的区别。同时，还提供了相关的代码示例。 ... [详细]

蜡笔小新 2023-12-10 12:48:16
io
Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案

本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题，并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式，我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的，因此无需担心会话信息被覆盖的问题。需要注意的是，本文讨论的是多个客户端级别上的多用户登录，而非同一个浏览器级别上的多用户登录。 ... [详细]

蜡笔小新 2023-12-10 12:00:40
grid
Tkinter Frame容器grid布局并使用Scrollbar滚动原理

本文介绍了如何使用Tkinter实现Frame容器的grid布局，并通过Scrollbar实现滚动效果。通过将Canvas作为父容器，使用滚动Canvas来滚动Frame，实现了在Frame中添加多个按钮，并通过Scrollbar进行滚动。同时，还介绍了更新Frame大小和绑定滚动按钮的方法，以及配置Scrollbar的相关参数。 ... [详细]

蜡笔小新 2023-12-09 07:37:04
grid
mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决

web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条，因为它主要用途是设置类似于qq界面的那种格 ... [详细]

蜡笔小新 2023-10-17 20:40:03
search
【爬虫】关于企业信用信息公示系统加速乐最新反爬虫机制

(￣▽￣)~又得半夜修仙了，作为一个爬虫小白，花了3天时间写好的程序，才跑了一个月目标网站就更新了，是有点悲催，还是要只有一天的时间重构。升级后网站的层次结构并没有太多变化，表面上 ... [详细]

蜡笔小新 2023-10-17 19:24:48
io
Oracle之存储过程

PLSQL块：PLSQL块都用于解决特定问题，PLSQL块可以有参数，也可以相互调用。PLSQL块可以作为模式对象在Oracle数据库中保存，根据用途可以 ... [详细]

蜡笔小新 2023-10-17 15:14:06
text
DOM事件大全

1.事件：js与html的交互就是通过事件的，观察者模式2.事件流：从页面中接收事件的顺序IE：:事件冒泡流，事件冒泡，事件从最具体的元素接收，然后逐级向上传播，主流浏览器都支持N ... [详细]

蜡笔小新 2023-10-16 14:18:49
text
org.apache.catalina.LifecycleEvent类的使用及代码示例

标题： ... [详细]

蜡笔小新 2023-12-13 11:03:10
text
C#多线程解决界面卡死问题的完美解决方案

当界面需要在程序运行中不断更新数据时，使用多线程可以解决界面卡死的问题。一个主线程创建界面，使用一个子线程执行程序并更新主界面，可以避免卡死现象。本文分享了一个例子，供大家参考。 ... [详细]

蜡笔小新 2023-12-10 10:37:32
text
C++标准库string类型的操作总结

总结一下C中string的操作，来自〈CPrimer〉第四版。1.string对象的定义和初始化:strings1;空串strings2(s1);将s2初始 ... [详细]

蜡笔小新 2023-12-09 09:05:48
io
工作经验谈之-让百度地图API调用数据库内容及详解

这段时间，所在项目中要用到的一个模块，就是让数据库中的内容在百度地图上展现出来，如经纬度。主要实现以下几点功能：1.读取数据库中的经纬度值在百度上标注出来。2.点击标注弹出对应信息。3 ... [详细]

蜡笔小新 2023-10-17 19:33:18
io
phpstrip_tags足以从字符串中删除HTML？

站点用户可以在站点上注册,并且在注册期间可以提供名称.我希望此名称是有效名称,并且不包含任何HTML和其他时髦字符.strip_tags够吗？解决方法: ... [详细]

蜡笔小新 2023-10-17 18:43:18
testing
数据库技术:execute immediate

首先在这里发发牢骚，指责下那些刻板的书写方式，不考虑读者理不理解，感觉就是给专业人员用来复习用的一样，没有前戏，直接就高潮，实在受不了！没基础或基础差的完全不知道发生了什么，一脸懵 ... [详细]

蜡笔小新 2023-10-17 16:43:29

小蚊子

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章