CODEWITHSUNDEEP
htmlcssheight
user3032469
user3032469

Reputation: 317

Same height at 2 elements

I have this:

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

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

https://jsfiddle.net/0r9ptmsr/

I want to make content element at same height with leftmenu only with CSS, without JS.

Upvotes: 0

Views: 38

Answers (5)

Anubhav pun
Anubhav pun

Reputation: 1323

Give the content height and box-sizing as

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

Upvotes: 0

ketan
ketan

Reputation: 19341

One simple solution is give position: relative; to parent container i.e. .page-container and position: absolute; to child.

And give height and width 100% to child div.

Working Fiddle

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

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

Upvotes: 1

Gaurav Rai
Gaurav Rai

Reputation: 928

Try this

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

Upvotes: 0

elreeda
elreeda

Reputation: 4597

give both of them same height for example 1000px;

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

like this :

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

Upvotes: 0

Cocco
Cocco

Reputation: 1

in ".content" class, write "height : 1000px;"

Upvotes: 0

Related Questions