[英]How an I set height relative to viewport for values other than 100 with Bootstrap 5?
这是尝试创建一种我过去创建的 div 类型，但使用具有最少非引导 css 的自定义样式表。 它还没有完全到位，但我正在尝试将我写入 django 静态文件 CSS 的每个样式规则转换为引导程序类。 我被困在基于视口的大小调整上。
在我发现这些文档之前的状态是这样的，高度拟合内容如您所料：
我将我的班级设置为“vh-100”，这非常酷，将 div 设置为占据视口的整个垂直高度。
但是等等，它与整个视口的高度相匹配，而不是在计算出导航栏和填充后的其余部分。 不过有道理。
惊人的！ 只需要把它剃掉一点，这样它就适合实际的视口，我们就有了想要的最终状态。
查看引导程序文档，您通常可以像我们在这里所做的那样指定 25%、50%、75% 或 100%。 好吧，它没有谈论基于视口的大小调整，但它在很多引导程序的东西中都有，所以我猜它在这里是一样的。 所以我试一试。 75% 的视口应该正好给它一点底部区域。
所以现在“vh-50”或“vh-75”
好吧，奇怪 - 视口必须是 100 否则它会回退到基于内容的大小。 在文档中没有关于基于视口大小的任何其他值的其他示例，我无法在野外找到任何其他示例。
以防万一，这是该 div 的 html（django 应用程序中 jinja 内容块的一部分）
{% block content %} <div class="body-area bg-dark text-light my-5 vh-75"> <div class="container"> <div class="row"> Hi </div> </div> </div> {% endblock %}
.body-area { margin-left: auto; margin-right: auto; width: 75%; border: 10px solid #000000; border-radius: 15px; } html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; }
虽然我开始认为我可能不应该打扰，并且可能不会在这个特定的应用程序中，但我认为能够根据视口的百分比来调整大小真的很有用，尤其是对于移动设备应用程序。
那么我是不是完全错了呢？ 除了 100 的视口外，我不应该调整任何大小吗？ 我应该如何解决这个问题，无论是使用我正在尝试的引导工具还是我目前不知道的最佳实践？
我希望那里的任何 CSS/bootstrap 向导都知道一个技巧，我希望这对我和将来遇到此问题的其他人都有帮助。
您不应该手动设置高度。 您应该使用flexbox 网格通过适当的对齐类自动完成它。
vh-100 。 这可以只是 body 元素。flex-fill放在内容元素上，使其伸展以填充剩余空间。 <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body class="d-flex flex-column vh-100"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- ... --> </div> </div> </nav> <div class="body-area container-fluid bg-dark text-light flex-fill"> <div class="row"> <div class="col"> Hi </div> </div> </div> </body>
当容器大于视口时，将高度设置为浏览器视口的100％？
[英]Set height to 100% of browser viewport when container is bigger than viewport?
在我实际设置 height: 100% 之前，相对 div 的高度为 100%
[英]Height of relative div is 100% until I actually set height: 100%
CSS-“高度100％”滚动到视口之外吗？ 我可以预防吗？
[英]CSS - “height 100%” scrolls further than the viewport? can i prevent?
我该怎么办？ height：相对于视口；“在CSS中？
[英]How do I do “min-height: height of content; height: relative to viewport;” in CSS?
如何在flexbox flex-column类div中将高度设置为高于100％？
[英]How can I set height higher than 100% in a flexbox flex-column class div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.