可滚动可弯曲的多种背景颜色-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

推荐阅读

js
Web开发框架概览：Java与JavaScript技术及框架综述

Web开发涉及服务器端和客户端的协同工作。在服务器端，Java是一种优秀的编程语言，适用于构建各种功能模块，如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示，同时借助JavaScript增强交互性和动态效果。此外，现代Web开发还广泛使用各种框架和库，如Spring Boot、React和Vue.js，以提高开发效率和应用性能。 ... [详细]

蜡笔小新 2024-11-09 11:59:38
copy
解决Bootstrap DataTable Ajax请求重复问题

在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]

蜡笔小新 2024-11-12 13:59:27
copy
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
import
第二十五天接口、多态

1.java是面向对象的语言。设计模式：接口接口类是从java里衍生出来的，不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]

蜡笔小新 2024-11-12 06:43:20
php
POJ 2482 星空中的星星：利用线段树与扫描线算法解决

在《POJ 2482 星空中的星星》问题中，通过运用线段树和扫描线算法，可以高效地解决星星在窗口内的计数问题。该方法不仅能够快速处理大规模数据，还能确保时间复杂度的最优性，适用于各种复杂的星空模拟场景。 ... [详细]

蜡笔小新 2024-11-09 12:09:08
php
JUC（三）：深入解析AQS

本文详细介绍了Java并发工具包中的核心类AQS（AbstractQueuedSynchronizer），包括其基本概念、数据结构、源码分析及核心方法的实现。 ... [详细]

蜡笔小新 2024-11-13 15:40:34
include
com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例

com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例 ... [详细]

蜡笔小新 2024-11-13 10:47:33
js
Python 数据可视化实战指南

本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ... [详细]

蜡笔小新 2024-11-13 06:03:30
php
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16
js
深切明白ES6笔记（三）函数

重要知识点有：函数参数默许值、盈余参数、扩大运算符、new.target属性、块级函数、箭头函数以及尾挪用优化《深切明白ES6》笔记目次函数的默许参数在ES5中，我们给函数传参数， ... [详细]

蜡笔小新 2024-11-12 14:57:05
include
PHP 对象生命周期与内存管理

本文详细介绍了 PHP 中对象的生命周期、内存管理和魔术方法的使用，包括对象的自动销毁、析构函数的作用以及各种魔术方法的具体应用场景。 ... [详细]

蜡笔小新 2024-11-12 13:35:26
stream
秒建一个后台管理系统？用这5个开源免费的Java项目就够了

秒建一个后台管理系统？用这5个开源免费的Java项目就够了 ... [详细]

蜡笔小新 2024-11-12 03:21:33
php
如何在 Vim 编辑器中调整和自定义配色方案

Vim 编辑器功能强大，但其默认的配色方案往往不尽如人意，尤其是注释颜色为蓝色时，对眼睛极为不友好。为了提升编程体验，自定义配色方案显得尤为重要。通过合理调整颜色，不仅可以减轻视觉疲劳，还能显著提高编码效率和兴趣。 ... [详细]

蜡笔小新 2024-11-11 12:34:19
include
解决Only fullscreen opaque activities can request orientation错误的方法

本文介绍了在使用PictureSelectorLight第三方框架时遇到的Only fullscreen opaque activities can request orientation错误，并提供了一种有效的解决方案。 ... [详细]

蜡笔小新 2024-11-13 09:46:25
js
JavaScript 计算两个日期之间的时间差

本文介绍了一种使用 JavaScript 计算两个日期之间时间差的方法。该方法支持多种时间格式，并能返回秒、分钟、小时和天数等不同精度的时间差。 ... [详细]

蜡笔小新 2024-11-13 09:29:58

小蚊子

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

Tags | 热门标签

RankList | 热门文章