如何让 Bootstrap 5 容器适合屏幕高度？

Posted 2023-03-05

【中文标题】如何让 Bootstrap 5 容器适合屏幕高度？

【英文标题】：How to get a Bootstrap 5 container to fit to height of screen?

【发布时间】：2021-12-31 15:33:13

【问题描述】：

我正在使用 Bootstrap 5 并尝试在屏幕上显示日历；但是高度比屏幕高度长约 25%。如何让容器高度适合屏幕高度。我也试过css中的“height: 100%”和“height: 80%”。

css

.sectionHeight 
    height: 100vh;
    width: auto;

html:

<div id="calendarAdmin"  class="container sectionHeight" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">

    <div id="includedContent"></div>

    <div class="col-lg-12 col-md-12 col-sm-12 col-12 beta">
        <h3>Full Callendar</h3>
        
        <div style="text-align: center;">
            <span id="ajaxGetUserServletResponse1" style="color: red; background-color: white;"></span>
        </div>
        
        <div id="loader"><img src="images/spinner.gif"/></div><!-- loading spinner -->
        
        <div class="whiteBackground" id="calendar"></div>
    </div>
</div>

【问题讨论】：

你有没有为 html 设置 css 规则并且 body 有 100% 的高度？

@AloisoGomes - 是的，如上所述，我尝试过“身高：100%”。

尝试删除类“容器”，它的引导规则标记为！重要，或者尝试将“h-100”添加到类

getbootstrap.com/docs/5.1/utilities/sizing

【参考方案1】：

如果要求保持浏览器窗口不滚动，我会使用 CSS 的 overflow 属性来强制日历在其父 IF 中滚动，这是绝对必要的。

如果必须在屏幕上显示完整的日历，我会在断点处调整字体大小、边距和填充。

【讨论】：

其目的是在更改大小时将完整的日历显示在屏幕上。

日历中是否有约会信息或只是一个月视图？

我认为使用 row-cols 可能很简单，但整数不能为 7，因为它不适合网格。

日历中有约会信息。

【参考方案2】：

你可以尝试使用通用选择器 * 进入你的css并删除引导程序的边距和填充默认值。托盘设置

*
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;

将所有内容设置为重要以覆盖引导程序默认设置

【讨论】：

嗨，戴维，谢谢；然而，没有喜悦。