bootstrap 设置高度为屏幕的百分比

Bootstrap中设置元素的高度为屏幕百分比通常通过CSS中的`height`属性配合百分比值来实现。你可以这样做：

<div class="container-fluid" style="height: 100vh;"> <!-- .container-fluid用于撑满全屏 -->
  <div class="row">
    <div class="col-md-8 col-md-offset-2" style="height: 100%;"> <!-- 高度设为100%，这里的col-*类来自Bootstrap栅格系统 -->
      这里的内容会充满其容器并且占据屏幕高度
    </div>
  </div>
</div>

在这个例子中，`.container-fluid`类会使内容充满整个浏览器窗口，而`.col-md-8`等类则表示响应式的列宽布局。`style="height: 100%;"`将该元素的高度设置为其父元素（这里是.container-fluid）的高度的100%。

请注意，百分比高度可能会导致滚动条出现，如果内容超过了视口大小。另外，对于某些固定尺寸需要保持稳定的元素，可能需要配合其他方法处理。

相关问题

bootstrap 高度的class

在 Bootstrap 中，有一些用于设置元素高度的 class。以下是一些常用的 class：

1. `.h-25`, `.h-50`, `.h-75`: 这些 class 用于设置元素的高度为相对父元素的百分比。例如，`.h-50` 将元素的高度设置为父元素高度的 50%。

2. `.h-auto`: 这个 class 用于将元素的高度设置为自适应，根据内容的高度自动调整。

3. `.h-100`: 这个 class 用于将元素的高度设置为父元素的 100%。

4. `.h-fit-content`: 这个 class 用于将元素的高度设置为适应内容的高度，不超过父元素的高度。

5. `.h-screen`: 这个 class 用于将元素的高度设置为屏幕的高度。

这些 class 可以应用于各种元素，如 `<div>`、`<section>`、`<header>` 等。例如，你可以使用以下代码将一个 `<div>` 元素的高度设置为父元素的 50%：

<div class="h-50">Content here</div>

请注意，这些 class 可能需要与其他 Bootstrap 栅格和布局类一起使用，以实现所需的效果。具体使用哪个 class 取决于你的需求和布局结构。你可以查阅 Bootstrap 文档以获取更多关于高度类的详细信息和示例。