主页 / 问题 / 1264234
Accepted
EsReich
Asked:2022-03-31 17:05:34 +0000 UTC2022-03-31 17:05:34 +0000 UTC

聊天布局。嵌套元素扩展

  • 772

我正在尝试进行简单的聊天，这是一张引导卡。消息应该出现在卡片正文中。问题是当有很多帖子时，卡体只是超出了父元素。我希望有一个滚动条。如何达到这样的效果？

Шаблон страницы: 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>User page</title>

    <style>
        body {
            display: flex;
            flex-direction: column;
            height:100vh;
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>

         <h1>General chat</h1>

         <br>

         <div class="card">
             <h3 class="card-header">Here you will see messages from all users</h3>
             <div class="card-body">
                 <div class="card" style="height: 390px; border-radius: 15px; background-color: rgba(0,0,0,0.08);">
                     <div class="card-body">
                        <!--Сообщения здесь-->                           
                     </div>
                     <div class="card-footer">
                         <form id="msgForm">
                             <div class="input-group">
                                 <textarea class="form-control" placeholder="Type your message..." rows="1">
                                 </textarea>

                                 <button type="submit" class="input-group-addon btn btn-primary" id="msgBtn">
                                     Send
                                 </button>
                                 </textarea>
                             </div>
                         </form>
                     </div>
                 </div>
             </div>
         </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script type="text/javascript" src="../static/userScript.js"></script>

</body>
</html>
html

1 个回答

  1. Best Answer

    添加card-body属性overflow: auto：

    body {
    display: flex;
    flex-direction: column;
    height:100vh;
    margin: 0;
    padding: 0;
}
.card-body {
  overflow: auto;
}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


         <h1>General chat</h1>

         <br>

         <div class="card">
             <h3 class="card-header">Here you will see messages from all users</h3>
             <div class="card-body">
                 <div class="card" style="height: 390px; border-radius: 15px; background-color: rgba(0,0,0,0.08); overflow: auto">
                     <div class="card-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos.  
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                                                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                                                                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                     </div>
                     <div class="card-footer">
                         <form id="msgForm">
                             <div class="input-group">
                                 <textarea class="form-control" placeholder="Type your message..." rows="1">
                                 </textarea>

                                 <button type="submit" class="input-group-addon btn btn-primary" id="msgBtn">
                                     Send
                                 </button>
                              </div>
                         </form>
                     </div>
                 </div>
             </div>
         </div>

    • 1

相关问题