CODEWITHSUNDEEP
htmlcss
Krrish Raj
Krrish Raj

Reputation: 1535

Making two div of same size

I have two columns in a row. I want the height of row to be the height of smaller column and the larger one will be scrollable. Is it possible to do without using javascript?

<div class="row">


  <div class="col-md-8">

    <span style="color:white">Wash-type</span>
    <form>
      <!-- dummy data-->
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r1"><span>Option 1</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>Option 2</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>option 3</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>Option 4</span></label>
    </form>


  </div>

  <div class="col-md-4" style="oveflow:scroll;">
    <div class="table-responsive">
      <table class="table">
        <thead>

          <tr>
            <th>#</th>
            <th>Service Option</th>
            <th>Price</th>

          </tr>

        </thead>
        <tbody>

        </tbody>
    </div>
  </div>

  </table>

</div>

Upvotes: 4

Views: 62

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

This is JS solution if you don't find other one https://jsfiddle.net/2Lzo9vfc/21/

JS

$(window).resize(setHeight);
$(document).ready(setHeight);

function setHeight() {
    var height = $('.left').height();
    $('.row, .right').height(height);
}

CSS 

.right {
    overflow-y: scroll;
}

HTML

    <div class="row">


    <div class="col-md-8 left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!</p>

        <span style="color:white">Wash-type</span>
        <form>
            <!-- dummy data-->
            <label class="customCheckbox"><input type ="radio"  name="r1" value="r1"><span>Option 1</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>Option 2</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>option 3</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>Option 4</span></label>
        </form>


    </div>

    <div class="col-md-4 right">
        <div class="table-responsive">
            <table class="table">
                <thead>

                    <tr>
                        <th>#</th>
                        <th>Service Option</th>
                        <th>Price <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!</p> </th>

                    </tr>

                </thead>
                <tbody>

                </tbody>
            </div>
        </div>

    </table>

 </div>

Upvotes: 2

Related Questions