2个元素的高度相同

Question

我有这个：

<div class="container">
<div class="page-container">
    <div class="leftmenu">

    </div>
    <div class="content">
        dada
    </div>
</div>

https://jsfiddle.net/0r9ptmsr/

我想只使用CSS，而不使用JS，将内容元素设置为与leftmenu相同的高度。

Answer 1

一个简单的解决方案是将position: relative;提供给父容器，即.page-container和position: absolute;给孩子。

并给予儿童div高度和宽度100％。

<强> Working Fiddle

.page-container { 
  overflow: hidden;
  position: relative;
}

.content{
 height: 100%;
 width:100%;
 position: absolute;
}

Answer 2

in＆＃34; .content＆＃34; class，write＆＃34; height：1000px;＆＃34;

Answer 3

给它们两个相同的高度，例如1000px;

.content, .leftmenu{
    height: 1000px;
}

像这样：

.container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.page-container { overflow: hidden; }

.leftmenu {
    width: 230px;
    float: left;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);   
    background-color: black;
}

.content {
     margin-left: 230px;
    background: #f3f4f6;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);   
    background-color: yellow;
}
.content, .leftmenu{
    height: 1000px;
}

<div class="container">
    <div class="page-container">
        <div class="leftmenu">
      
        </div>
        <div class="content">
            dada
        </div>
    </div>
</div>

Answer 4

试试这个

＆＃13;

＆＃13;

.container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.page-container { overflow: hidden; height:1000px; }

.leftmenu {
    width: 230px;
    float: left;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);   
    background-color: black;
    height: 100%;
}

.content {
     margin-left: 230px;
    background: #f3f4f6;
    height: 100%;
    
    padding: 15px;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);   
    background-color: yellow;
}

＆＃13;

<div class="container">
    <div class="page-container">
        <div class="leftmenu">
      
        </div>
        <div class="content">
            dada
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

将内容高度和框大小设为

.content {
    box-sizing: border-box;
    height: 1000px;
}