左右两个div里的内容多少不确定，高度也不能写死，怎么让左右两个div高度始终保持一致呢？
1.第一种方法
首先设置父元素"overflow:hidden"，然后左右两个子元素设置"margin-bottom: -10000px"和"padding-bottom: 10000px"
代码如下：
<!
DOCTYPE html
>
<
html lang
=
"zh"
>
<
meta charset
=
"UTF-8"
>
<
meta name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
meta http
-
equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
title
></
title
>
<
style
>
.
warp
{
width
:
100
%;
overflow
:
hidden
;
.
left
{
float
:
left
;
width
:
50
%;
background
:
#ccc;
margin
-
bottom
:
-
10000px
;
padding
-
bottom
:
10000px
;
.
right
{
float
:
right
;
width
:
50
%;
background
:
#eee;
margin
-
bottom
:
-
10000px
;
padding
-
bottom
:
10000px
;
</
style
>
</
head
>
<
div
class
=
"warp"
>
<
div
class
=
"left"
>
</
div
>
<
div
class
=
"right"
>
右侧
<
br
>
右侧
<
br
>
右侧
<
br
>
右侧
<
br
>
右侧
<
br
>
</
div
>
</
div
>
</
body
>
</
html
>
2.第二种方法
给父元素设置"display: flex"
代码如下：
<!
DOCTYPE html
>
<
html lang
=
"zh"
>
<
meta charset
=
"UTF-8"
>
<
meta name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
meta http
-
equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
title
></
title
>
<
style
>
.
warp
{
width
:
100
%;
display
:
flex
;
.
left
{
width
:
50
%;
background
:
#ccc;
.
right
{
width
:
50
%;
background
:
#eee;
</
style
>
</
head
>
<
div
class
=
"warp"
>
<
div
class
=
"left"
>
</
div
>
<
div
class
=
"right"
>
右侧
<
br
>
右侧
<
br
>
右侧
<
br
>
右侧
<
br
>
右侧
<
br
>
</
div
>
</
div
>
</
body
>
</
html
>
以上两种方法都可以实现左右两个div高度保持一致。
