如何停止滚动比 div 高度长的 div? [英] How to stop scrolling div which is longer than div height?

问题描述

我有图像，右侧对齐，位置固定，大文本内容与左侧对齐.如何处理右侧的图像和文本内容应该只能使用引导程序滚动.这是我的代码.

感谢您的时间和建议

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!-- jQuery 库--><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- 最新编译的 JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="container" style="margin-top: 50px;"><div class="row pull-right" style="width: 60%;float: right;"><img src="https://picsum.photos/200/300/?random" alt="" width="1000px" height="1000px"></div><div class="row pull-left" style=" width: 35%;float: left;"><p>Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet

解决方案

我不太确定，但是，我想，您只能通过将两列的 height 属性设置为一个固定的数字，例如 600px.然后，对段落列使用 overflow: scroll.

如果您事先知道 img 的高度，则为两列指定与 img 相同的高度.否则，请使用您认为合适的 number.

Bootstrap-3

.mt-10 {边距顶部:10rem；}.col-left,.col-right {最大高度:600px；}.溢出滚动{溢出:滚动；}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!-- jQuery 库--><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- 最新编译的 JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="container mt-10"><div class="row"><div class="col-xs-12 col-sm-6 col-left overflow-scroll"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet,consectetur adipisicing 精英.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.控告自由人atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit,adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est inunde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniamsuscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sintut sed amet.Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor坐在 amet，consectetur adipisicing 精英.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing精英.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.控告自由人atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit,adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est inunde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniamsuscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sintut sed amet.Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor坐在 amet，consectetur adipisicing 精英.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing精英.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.控告自由人atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit,adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sat amet, consectetur adipisicing elit.Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est inunde tempora fugit veniam suscipit voluptatibus sint ut sed amet.

<div class="col-xs-12 col-sm-6 col-right"><img src="https://picsum.photos/1000/1000/?random" alt="" class="img-responsive">