{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 该账号已被封号 的问题《How to stop scrolling div which is longer than div》','https://www.manongdao.com/q-440089.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have image, aligning to right side and position is fixed and large text content which is aligning to left side. How the to do the image on the right side and text content should be only scroll able by using bootstrap. Here my code.
Thanks for your time and suggestions
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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 sit 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.</p></div>
</div>
I am not really sure, but, I guess, you can only accomplish this by sitting the
heightproperty of the two columns to a fixed number, for instance,600px. And then, useoverflow: scrollfor paragraph columns.Give the two columns the same height as the
img, if you know the height of theimgbeforehand. Otherwise, use anumberthat you think fits well.Bootstrap-3
Check this pen
Bootstrap-4
Check this pen