Html 如何保持一个div的高度与另一个一样?

Html 如何保持一个div的高度与另一个一样?,html,css,Html,Css,基本思想是,当你进入响应模式时,一个div(红色背景)应始终与另一个div(蓝色背景)具有相同的高度。但是,div(红色背景)的高度不会与蓝色的相同。这是我的密码: 标题 html{ 填充:0; 保证金:0; 框大小:边框框; } * { 框大小:边框框; 保证金:0; 填充:0; } 身体{ 背景色:#F2F2; } .右框{ 宽度:305px; 高度:100vh; 左侧填充:15px; 左边距:15px; 浮动:对; 背景色:#f1b5b5; } .内容{ 边缘顶部:80px; 背景色:#

基本思想是,当你进入响应模式时,一个div(红色背景)应始终与另一个div(蓝色背景)具有相同的高度。但是,div(红色背景)的高度不会与蓝色的相同。这是我的密码:

标题
html{
填充:0;
保证金:0;
框大小:边框框;
}
* {
框大小:边框框;
保证金:0;
填充:0;
}
身体{
背景色:#F2F2;
}
.右框{
宽度:305px;
高度:100vh;
左侧填充:15px;
左边距:15px;
浮动:对;
背景色:#f1b5b5;
}
.内容{
边缘顶部:80px;
背景色:#a8eaea;
宽度:100%;
}
p{
字号:26px;
}
他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。
在亨德雷特的两个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里。这是一位杰出的领袖,他是一位伟大的领袖。
但是,在最低限度的利益下,我们必须在公共消费品的基础上,继续履行我们的义务。在亨德雷特的两个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里,一个房间里。
不受时间和解决方案的限制,不受限制,不受限制,不受限制。这是一位杰出的领袖,他是一位伟大的领袖。但是,在最低限度的利益下,我们必须在公共消费品的基础上,继续履行我们的义务。
在亨德雷特的两个房间里,有一个小房间,一个小房间,一个小房间。
在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。这是一个非常好的例子,因为它是一个非常好的例子。圣殿海位于塔基马塔和沃卢普图亚。这是我的不幸。我们需要一个好的环境,一个好的环境,一个好的环境。
mpor和Solutiona nobis eleifend选件,包括一个完整的拱形结构和一个全新的位置。这是一位杰出的领袖,他是一位伟大的领袖。但是,如果要实现最低限度的利益,就必须在一般情况下对其进行适当的补偿


使用flexbox非常简单

首先,我将.content定义为具有
display:flex
Flexbox的默认流是row,这使得容器内的所有元素都位于一行上。默认情况下,Flexbox也会将所有元素拉伸到与容器相同的高度,这就是我们在本场景中想要的

Flex:1
是Flex容器中指定的可用空间比例

左右两侧的
Flex:1
等于Flex容器中可用空间的50%

html{
填充:0;
保证金:0;
框大小:边框框;
}
* {
框大小:边框框;
保证金:0;
填充:0;
}
.内容{
显示器:flex;
宽度:100%;
}
.右框{
弹性:1;
背景色:#f1b5b5;
}
.左框{
弹性:1;
背景色:#a8eaea;
}
p{
字号:26px;
}

标题
他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。Lorem ipsum dolor sit amet,Conseteteur sadipscing Eliter,东南部
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        html {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f2f2f2;
        }
        .right-box {
            flex:1;
            margin-right: 1%;
            float: right;
            background-color: #f1b5b5;
        }
        .left-box {
            flex:1;
            margin-left: 1%;
            float: left;
            background-color: #a8eaea
        }
        .content {
            margin-top: 80px;
            display: flex;
            width: 100%;
           
        }
        p {
            font-size: 26px;
        }
    </style>
    <body>

    <div class="content">
        <div class="content">
            <div class="left-box">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
                    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                    dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
                    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                    duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
                    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                
                    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                    consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
                    eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
                    delenit augue duis dolore te feugait nulla facilisi.
                
                    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
                    assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
                    lobortis nisl ut aliquip ex ea commodo consequat.
                
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
                    nulla facilisis.
                
                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
                    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
                    ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                    amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed
                    tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero
                    voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                    eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
                    mpor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem
                    ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
                    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
                    ut aliquip ex ea commodo
                </p>
            </div>
            <div class="right-box">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
                    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                    dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    
                </p>
            </div>
            </div>
        
    </div>
    </body>
    </html>