Question

<body class='container-fluid mx-auto' style='width: 95%'>
<div class='row'>

<div
    id='video_container'
    class='
        embed-responsive
        embed-responsive-16by9
        card card-body rounded-0 border-0
        col-9'>
    <div id='player'></div>
</div>

<div
    id='chat_container'
    class='card card-body rounded-0 col-3'
    style='overflow-y: scroll'>
</div>

</div>
</body>

我希望所有内容都保持响应状态（video_container以适当的比例进行响应，而video_container和chat_container的高度相同）。但我不希望chat_container在聊天填补空间时将高度进一步扩大到低于高度。相反，我希望它滚动。怎么办？

我确实在overflow-y: scroll中将chat_container设置为id <style></style>，因为将style属性直接添加到element（???）时会消失，但这没有任何作用。 / p>

我的头部（从下载的副本中本地存储）：

<link rel='stylesheet' href='bootstrap.min.css'>
<script src='jquery-3.3.1.slim.min.js'></script>
<script src='bootstrap.min.js'></script>
<script src='popper.min.js'></script>

Answer 1

您可以通过创建自己的video-chat-row类来实现。请注意，通过使用embed-responsive-16by9类，您不能期望row和col-x类正常工作。您必须创建自己的替代。

.video-chat-row {
  display: flex;
  width: 100%;
  position: relative;
}


#video_container {
  flex: 0 0 75%;
  background-color: black;
}

#chat_container {
  position: absolute;
  width: 25%;
  left: 75%;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: scroll;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body class='container-fluid mx-auto' style='width: 95%'>
<div class='video-chat-row'>

<div
    id='video_container'
    class='
        embed-responsive
        embed-responsive-16by9
        card card-body rounded-0 border-0' >
    <div id='player'></div>
</div>

<div
    id='chat_container'
    class='card card-body rounded-0'>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
    <p>Proin tincidunt aliquam efficitur. Cras laoreet in nulla id porttitor. Aliquam gravida, ex vulputate aliquam placerat, enim orci maximus turpis, ac lobortis quam urna eget nulla. In vel elit diam. Pellentesque fermentum a dolor sed venenatis. Praesent sit amet vulputate purus, vitae laoreet leo. Vivamus sed volutpat nunc. Nam nunc ex, auctor quis purus at, vulputate interdum enim. Maecenas non tincidunt purus, eget imperdiet lacus. Proin in dictum enim, vitae sodales tortor. Vivamus gravida finibus viverra. Nulla tempor vestibulum lorem. Morbi placerat blandit iaculis. Mauris cursus ex nibh, ornare gravida velit porta commodo. In sit amet mattis leo, at congue magna. Maecenas eu consectetur nulla.</p>
    <p>Quisque et lorem vitae nisi efficitur vehicula id vel nibh. Sed in felis tellus. Nulla viverra augue vel pretium tempus. Proin laoreet lectus ac nisl consectetur, sed mollis sem malesuada. Vivamus id lacinia erat, vel mollis eros. Ut aliquam pretium diam, ac efficitur ipsum aliquam ut. Nullam vel elit orci. Cras in malesuada nunc. Suspendisse elit lectus, tincidunt eu purus ac, consequat faucibus lacus. Sed aliquet risus ut ligula gravida, a lobortis massa pellentesque. In molestie ut sapien nec mollis. Proin a mattis diam, ut imperdiet risus. Donec id nulla massa. Donec nec mi non lacus ultricies pharetra. Morbi magna odio, sollicitudin ut lobortis at, tempus nec sem. Aliquam non ligula nec ante pharetra dapibus eu sed augue.</p>
    
</div>

</div>
</body>

Bootstrap专栏，如何在溢出时滚动？

1 个答案: