CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jks
Jks

Reputation: 103

Child div auto resize to its parent

I have a parent div . Inside it their are 3 divs one on the left side and other two on the right side . I need to increase the height of my left div as the content of the right div increases

.jumbotron-r {
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
  height: auto;
}

@media (min-width: 576px) {
  .jumbotron-r {
    padding: 7.5rem 2rem;
  }
}

.jumbotron-l {
  padding: 2rem 1rem;
  margin-bottom: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron-l {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid-l {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.letter-color {
  color: #fff;
}

.break {
  background-color: #fff;
  height: 1px;
}

.jumbotron-nav {
  margin-bottom: 1rem;
  border-radius: 0.3rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6 col-md-6 col-lg-5 ">
    <div class="jumbotron-r">
      <h1 class="letter-color">Left Div</h1>
      <p class="letter-color">Left Div content</p>

    </div>
  </div>
  <div class="col-sm-6 col-md-6 col-lg-7 ">
    <div class="jumbotron-l">
      <p class="letter-color">Right Div1 content</p>

    </div>
  </div>

  <div class="col-sm-6 col-md-6 col-lg-7 ">
    <div class="jumbotron-l">
      <p class="letter-color">Right Div2 content</p>
      <p><a href="#" target="_blank" class="btn btn-success btn-lg">Button</a></p>
    </div>
  </div>
</div>

Left Div size must be same as the right div

Specifying the height to a particular value is not possible for me . Because the contents may vary

Upvotes: 2

Views: 1999

Answers (3)

jaunt
jaunt

Reputation: 5086

Originally I was going to answer with the same solution as @Mihai-t but I realised a css grid solution, in my opinion, is more elegant and appropriate:

#a {
  grid-area: a;
}

#b {
  grid-area: b;
}

#c {
  grid-area: c;
}

#container {
  display: grid;
  grid-gap: .5rem;
  grid-template-columns: auto auto;
  grid-template-areas: 
    "a" 
    "b" 
    "c";
}

@media (min-width: 700px) {
  #container {
    grid-template-areas: 
      "a b" 
      "a c";
  }
}

@media (min-width: 1200px) {
  #container {
    grid-template-areas: 
      "b a c";
  }
}

.item {
  padding: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
  color: #fff;
  font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}
<div id="container">
  <div id="a" class="item">
    <h1>Left</h1>
  </div>
  <div id="b" class="item">
    <p>Right Top</p>
  </div>
  <div id="c" class="item">
    <p>Right bottom</p>
  </div>
</div>

Unfortunately css-grid isn't quite as well supported as flex is, but like with flex you should just serve the mobile version to unsupported browsers.

This solution allows you to add as many layouts as you wish and place the objects in any order, which is what the additional media query demonstrates. Which is something you cannot achieve using flex.

Upvotes: 2

Mihai T
Mihai T

Reputation: 17687

You can make equal height columns with display:flex on row. So, you need to have both columns in the same row.

So make just 2 col-md-6 ( not sure why you added another one ) and use display flex when over 768px on the row

see snippet below or jsFiddle

.row-eq-height .col-sm-6:first-child .jumbotron-r {
  height: 100%;
}

.jumbotron-r {
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
  height: auto;
}

@media (min-width: 576px) {
  .jumbotron-r {
    padding: 7.5rem 2rem;
  }
}

.jumbotron-l {
  padding: 2rem 1rem;
  margin-bottom: 1rem;
  background-color: #333;
  border-radius: 0.3rem;
}

.jumbotron-l:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .row-eq-height {
    display: flex;
  }
}

@media (min-width: 576px) {
  .jumbotron-l {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid-l {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.letter-color {
  color: #fff;
}

.break {
  background-color: #fff;
  height: 1px;
}

.jumbotron-nav {
  margin-bottom: 1rem;
  border-radius: 0.3rem;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-eq-height">
  <div class="col-sm-6 col-md-6 col-lg-5 ">
    <div class="jumbotron-r">
      <h1 class="letter-color">Left Div</h1>
      <p class="letter-color">Left Div content</p>

    </div>
  </div>
  <div class="col-sm-6 col-md-6 col-lg-7 ">





    <div class="jumbotron-l">
      <p class="letter-color">Right Div1 content</p>

    </div>





    <div class="jumbotron-l">
      <p class="letter-color">Right Div2 content</p>
      <p><a href="#" target="_blank" class="btn btn-success btn-lg">Button</a></p>
    </div>
  </div>

Upvotes: 2

Rahele Dadmand
Rahele Dadmand

Reputation: 573

you can use jquery take a look at this plugin https://github.com/liabru/jquery-match-height

you give your divs the same class and this will match their height

<script>
      $(document).load(function() { 

        $('.same_height').matchHeight({ byRow:true });

      });
      </script>

Upvotes: 1

Related Questions