же высота в 2-х элементов

Question

у меня есть это:

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

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

https://jsfiddle.net/0r9ptmsr/

Я хочу, чтобы элемент контента на той же высоте с leftmenu только с помощью CSS без JS.

Answer 1

Одно простое решение дает position: relative; для родительского контейнера т.е. .page-container и position: absolute; к ребенку.

И дайте высоту и ширину 100% ребенку.

Working Fiddle

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

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

Answer 2

в классе «.content», напишите «height: 1000px;»

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

Попробуйте

.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; 
 
}

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

Answer 5

Дайте высоту содержимого и коробчатого размеров, как

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