浏览器滚动条不出现
[英]Browser Scrollbar doesn't appear
问题描述
I'm designing an html page but the browser scrollbar doesn't appear when the content extends beyond the browser window.
我正在设计一个 html 页面，但是当内容超出浏览器窗口时，浏览器滚动条不会出现。 I'm a beginner at CSS and don't know exactly how to add attributes and how do they work.我是 CSS 的初学者，不知道如何添加属性以及它们如何工作。 As you can see I've used W3.CSS and Bootstrap for the most part of design.如您所见，我在大部分设计中都使用了 W3.CSS 和 Bootstrap。 here's the html:这是html：
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <title>Dr Salmani</title> </head> <body> <main class="centered dr-info"> <div class="w3-container w3-card-4 w3-light-grey"> <div id="cases"> <table> <tr> <td>شماره پرونده:</td> <td id="case_number">1080</td> </tr> </table> </div> <div class="container"> <table> <tr> <td> <label for="fname" class="label">نام و نام خانوادگی:</label> </td> <td class="td-input"> <input type="text" id="fname" name="fname" class="input w3-input w3-border w3-round-large" placeholder="نام و نام خانوادگی" readonly> </td> </tr> <tr> <td> <label for="pet_type" class="label">نوع حیوان:</label> </td> <td class="autocomplete"> <div class="autocomplete"> <input type="text" id="pet_type" class="input w3-input w3-border w3-round-large" name="pet_type" placeholder="نوع حیوان" readonly> </div> </td> <td> <label for="age" class="label">سن:</label> </td> <td class="td-input"> <input type="text" class="input w3-input w3-border w3-round-large" id="age" name="age" placeholder="سن" readonly> </td> <td> <label for="gender" class="label">جنس:</label> </td> <td> <input type="text" name="gender" id="gender" class="input w3-input w3-border w3-round-large" placeholder="جنس" readonly> </td> </tr> <tr> <td> <label for="history" class="label">تاریخچه:</label> </td> <td> <input class="input w3-input w3-border w3-round-large" id="history" name="history" placeholder="تاریخچه" readonly> </td> <td> <label for="case" class="label">شکایت اصلی:</label> </td> <td> <input type="text" class="input w3-input w3-border w3-round-large" id="case" name="case" placeholder="شکایت اصلی" readonly> </td> </tr> </table> </div> </div> <div class="w3-container w3-card-4 w3-light-grey diagnose container"> <table> <tr> <td> <label for="diagnose">تشخیص:</label> </td> <td style="width: 400px;"> <input type="text" class="input w3-input w3-border w3-round-large" id="diagnse" name="diagnose" placeholder="تشخیص"> </td> </tr> <tr> <td> <label for="treatment">درمان:</label> </td> <td style="width: 400px;"> <input type="text" class="input w3-input w3-border w3-round-large" id="treatment" name="treatment" placeholder="درمان"> </td> </tr> </table> </div> <div class="w3-container w3-card-4 w3-light-grey diagnose container"> <table class="table w3-striped"> <thead> <tr> <th scope="col">خدمات</th> <th scope="col">تعرفه</th> </tr> </thead> <tbody> <tr> <th scope="row">ویزیت</th> <td> <input type="text" class="input w3-input w3-border w3-round-large" id="treatment" name="treatment" placeholder="درمان"> </td> </tr> <tr> <th scope="row">جراحی</th> <td> <input type="text" class="input w3-input w3-border w3-round-large" id="treatment" name="treatment" placeholder="درمان"> </td> </tr> <tr> <th scope="row">تزریقات</th> <td> <input type="text" class="input w3-input w3-border w3-round-large" id="treatment" name="treatment" placeholder="درمان"> </td> </tr> <tr> <th scope="row">داروخانه</th> <td> <input type="text" class="input w3-input w3-border w3-round-large" id="treatment" name="treatment" placeholder="درمان"> </td> </tr> <tr> <th scope="row">رادیولوژی</th> <td> <input type="text" class="input w3-input w3-border w3-round-large" id="treatment" name="treatment" placeholder="درمان"> </td> </tr> <tr> <th scope="row">سونوگرافی</th> <td> <input type="text" class="input w3-input w3-border w3-round-large" id="treatment" name="treatment" placeholder="درمان"> </td> </tr> </tbody> </table> </div> </main> </body> </html>
and here's the CSS:这是CSS：
.container { position: relative; } body { height: 100%; overflow: auto; box-sizing: border-box; } tr, td { border-bottom: 1px solid #ddd; padding-bottom: 15px; padding-top: 15px; margin: 50px; } .centered { position: fixed; /* or absolute */ top: 20%; left: 13%; } .dr-info { position: fixed; top: 10%; } main { width: 70%; } .td-input { width: 250px; } .diagnose { margin-top: 30px !important; }
I've tried adding height and overflow attribute to body and html separately but it does nothing.我试过分别向 body 和 html 添加高度和溢出属性，但它什么也没做。 Scrollbar appears to main tag when I add height and overflow attribute to it.当我向它添加高度和溢出属性时，滚动条出现在主标签上。 Opening the page with different browser doesn't make any change.用不同的浏览器打开页面不会做任何改变。
2 个解决方案
解决方案1
0 已采纳 2021-07-29 09:11:47
Your main container is positioned fixed and has a width of 70% - no matter the screen size.您的main容器位置固定，宽度为 70% - 无论屏幕尺寸如何。 If you want to make this container scrollable, you should add the overflow property to this container, not body:如果你想让这个容器可滚动，你应该向这个容器添加溢出属性，而不是主体：
.dr-info {
overflow: auto;
}
解决方案2
0 2021-07-29 09:12:51
Your position is fixed in centered and dr-info class.您的位置固定在居中和博士信息类中。 Remove it scroll will start appearing.删除它滚动将开始出现。
.centered {
/*position: fixed;*/
/* or absolute */
top: 20%;
left: 13%;
}
.dr-info {
/*position: fixed;*/
top: 10%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.