Question

我想规定一列的高度与它的同级相同。如何使列的子项具有一定的高度以填充剩余空间，而这些子项的内容太大。演示： https://stackblitz.com/edit/empty-xgvdqz?file=index.html

Answer 1

您可以使用flexbox（d-flex flex-column）和另一个“包装器” div。然后将内部可滚动的div位置设为绝对。

.wrapper {
  position: relative;
  flex: 1 1 auto;
}
.scroll {
  position: absolute;
  top: 0; bottom: 0;
  overflow-y: auto;
  width: 100%;
}

<div class="container">
    <div class="row py-4 border border-secondary">
        <div class="col-5 py-3 border border-primary">
            <p>I want to dictate my neighbouring column's height to be equal to me, but right now it's the other way around</p>
            <div class="border border-warning p-1" style="height: 150px;">
                filler content (height: 150px;)
            </div>
        </div>
        <div class="offset-1 col-5 py-3 border border-primary d-flex flex-column position-relative">
            <p class="flex-shrink-1">I <strong><u>do not want</u> </strong> to be scrollable</p>
            <div class="border border-warning p-1 wrapper">
                <div class="scroll">
                    <p>I <strong><u>want </u></strong> to be scrollable</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/ehrZhUN8qL
https://stackblitz.com/edit/empty-e3uh4c?file=index.html

bootstrap 4列的高度等于具有较大可滚动内容的同级高度

1 个答案: