Bootstrap 5. how to remove page scrolling-CodePudding

I want to make sure that only the card-body block scrolls. Now the page scrolls a bit when the card-body block overflows (there are 2 scroll bars). The lorem text was inserted for an overflow example. The result should be as in the picture. The crossed-out scroll bar should be removed, and the ticked one should remain enter image description here

html, body {
    height: 100%;
}

.ts_panel {
    height: 100%;
    border-right: 2px solid #646464;
    background: rgb(44,44,44);
}

.ts_usernameInp {
    width: 40%;
    margin: 0 auto;
}

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="index.css">
  </head>
<body>
    
    <div >
        <header >
            <span>Ссылка для подключения к чату: <a href="/chat?chat_id=tZGuDGqdHa0e3IAfTRY7">127.0.0.1:8000/chat/?chat_id=tZGuDGqdHa0e3IAfTRY7</a></span>
        </header>
        <div >
            <div >
                <h1 >Чат</h1>
            </div>
            <div >
                <div >
                    <form  action="" method="post">
                        <div >
                            <div >
                                <input type="text"  placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                            </div>
                            <div >
                                Obcaecati dolor quam voluptate praesentium quaerat et maxime provident tempora alias suscipit facere est, laborum ad aperiam quas animi corporis neque delectus nostrum hic nisi! Omnis, ea atque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, nam expedita fugiat aperiam, ad corporis voluptatem laudantium assumenda deleniti, cum quasi voluptatibus. Beatae cum ratione debitis expedita ducimus veritatis suscipit, quod aperiam magni nihil ab voluptas dolorum eaque? At necessitatibus tempora enim, quisquam possimus ipsa provident fugiat quaerat nobis. Delectus aliquam porro beatae rerum eligendi distinctio ab voluptatem vero dignissimos neque in itaque maiores nostrum aspernatur excepturi, minima totam magni nesciunt blanditiis, accusamus hic consequatur! Sint eveniet error optio corrupti dicta dolores reprehenderit quas molestiae, saepe exercitationem culpa commodi doloremque cum rem quod sit accusamus enim alias. Quod dolore veritatis a magni, dolor cum quo libero enim reprehenderit, aut ex, nobis et possimus reiciendis dolorem. Quae, fugit quasi! Voluptatum saepe numquam quam, nobis sint ipsam maiores sunt? Eius ab quasi aut ullam aliquam architecto, placeat optio dolorum cumque odio dolorem recusandae explicabo cum. Consequuntur odit a illum tenetur illo exercitationem architecto soluta corrupti, temporibus voluptate consequatur maxime impedit praesentium quisquam eius dolorem. Aspernatur, neque tenetur corporis inventore quisquam aliquid perferendis eaque doloremque. Laborum laboriosam magnam alias nam blanditiis temporibus omnis dolor, quae sint modi officiis earum possimus voluptatibus. Molestiae nihil debitis repellat provident officiis sint quaerat aliquam eos eum accusantium aliquid, quam exercitationem nesciunt dolorum, sunt maxime. Consequatur consectetur sunt explicabo aperiam ipsam eaque labore obcaecati cupiditate. A ut culpa similique ipsam illo ducimus placeat id eligendi officia nulla beatae quasi sunt cum rem, consequatur nisi nam ab? Impedit cum assumenda reprehenderit consectetur?
                            </div>
                            <div >
                                <div >
                                    <input type="text"  placeholder="Введите сообщение" aria-label="Сообщение" aria-describedby="basic-addon2">
                                    <div >
                                      <button  type="button">Отправить</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


</body>
</html>

CodePudding user response：

Okay, you must use this for block scrolling bars overflow-y: hidden; overflow-x: hidden; but you must make Mobile optimalization use https://www.w3schools.com/cssref/css3_pr_mediaquery.asp and add the new css and done fixed.

html, body {
    height: 100%;
    overflow-y: hidden; 
    overflow-x: hidden; 
}

if you need still help, make comment i help you.