使两个div尺寸相同

Question

使两个div尺寸相同

4

我有一行中的两个列。我希望该行的高度为较小列的高度，并且较大的列可以滚动。是否可以在不使用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>

- Krrish Raj

展示你的工作或代码 - Raviteja

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Krrish Raj

@KrrishRaj 你有与这些类相匹配的样式吗？另外，这是一个小错误，但我认为底部div的结束标签应该在表格的结束标签之后。 - zer00ne

@zer00ne 谢谢你的关注。这只是一个粗略的代码，用于检查事物是否正常工作。在上传代码时，我不得不删除很多代码，因为页面显示“太多代码，请添加一些细节”，所以元素被打乱了。抱歉 :) - Krrish Raj

@ woestijnrog 那就可以了。谢谢 :) - Krrish Raj

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nenad Vracar · Accepted Answer

如果您找不到其他解决方案，这是JS解决方案：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>