Set equal height for 2 divs

Question

I use bootstrap and I want to create 2 divs.

1 - content div ( info-section ) 2 - div with backgroung image ( cover-block )

But I have problem. I cant set height1 = height2. My code:

<div class="cover-section">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 info-section">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="col-md-6 cover-block"></div>
        </div>
    </div>
</div>

Css:

.info-section {
background-color: red;
padding: 100px 40px;
border: none;
}

.cover-block {
background: url(../images/2.jpg) center no-repeat;
background-size: cover;
height: 500px;
}

I try to use

.cover-block{
    height:100%;
}

but it doesn't work

twitter bootstrap doesn't supply the requested behavior. But it is possible to achive this with JavaScript/jQuery - or [flex-box](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) (my preference) - or if you need to support lower IE versions with `display: table;` etc, which of course isn't a very nice solution. **PS:** `height: 100%;` only works if the parent has a set height. — AlexG, Mar 03 '17 at 15:00

score 0 · Accepted Answer · edited Mar 03 '17 at 15:11

0

Try this It uses flexbox.

check snippet

.row-eq-height {
  display: flex;
}
.info-section {
background-color: red;
}
.cover-block {
background-color: yellow;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


<div class="cover-section">
    <div class="container-fluid">
        <div class="row row-eq-height">
            <div class="col-xs-6 col-md-6 info-section" >
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="col-xs-6 col-md-6 cover-block"></div>
        </div>
    </div>
</div>

edited Mar 03 '17 at 15:11

Christoph

50,121
21
99
128

answered Mar 03 '17 at 15:02

neophyte

6,540
2
28
43

1

Neophyte, you could greatly improve the quality of your snippets, by using the separate fields for html, css and js. Also, there is a field for external libs to the left. – Christoph Mar 03 '17 at 15:04
Yes doing that thanks – neophyte Mar 03 '17 at 15:05
@Christoph: done..thanks for mentioning it. – neophyte Mar 03 '17 at 15:07
You are welcome. I did another edit - removed the unnecessary links, and html/header tags and also cleaned up the prefixed flex-box directives, as you don't need them anymore. http://caniuse.com/#search=flex-box – Christoph Mar 03 '17 at 15:12
Thank you very much .I was using it like this still now. It really helped. – neophyte Mar 03 '17 at 15:13

Set equal height for 2 divs

1 Answers1