Bootstrap 4，如何使 col 的高度为 100%? [英] Bootstrap 4, how to make a col have a height of 100%?

查看：39
本文介绍了Bootstrap 4，如何使 col 的高度为 100%?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何使用 bootstrap 4 使列占据浏览器的 100% 高度?

请参阅以下内容:https://codepen.io/johnpickly/pen/dRqxjV

注意黄色 div，我需要这个 div/column 占据 100% 的高度......有没有办法在不必让所有父 div 的高度都为 100% 的情况下实现这一点?

谢谢

html:

<div class="row justify-content-center"><div class="col-4 hidden-md-down" id="黄色">XXX
<div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">表格在这里

解决方案

使用 Bootstrap 4 h-100 类用于 height:100%;

<div class="row justify-content-center h-100"><div class="col-4 hidden-md-down" id="黄色">XXX
<div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">表格在这里

https://www.codeply.com/go/zxd6oN1yWp

您还需要确保任何父母也是 100% 的高度(或具有定义的高度)...

html,body {高度:100%；}

注意:100% 高度与剩余"高度不同.

<小时>

相关: 引导程序 4:如何使行拉伸剩余高度?

how can I make a column take up 100% height of the browser w bootstrap 4?

See the following: https://codepen.io/johnpickly/pen/dRqxjV

Note the yellow div, I need this div/column to take up a height of 100%... Is there way to make this happen without having to make all parent div's have a height of 100%?

Thank you

html:

<div class="container-fluid">
  <div class="row justify-content-center">

    <div class="col-4 hidden-md-down" id="yellow">
      XXXX
    </div>

    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
      Form Goes Here
    </div>
  </div>
</div>

解决方案

Use the Bootstrap 4 h-100 class for height:100%;

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 hidden-md-down" id="yellow">
      XXXX
    </div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
      Form Goes Here
    </div>
  </div>
</div>

https://www.codeply.com/go/zxd6oN1yWp

You'll also need ensure any parent(s) are also 100% height (or have a defined height)...

html,body {
  height: 100%;
}

Note: 100% height is not the same as "remaining" height.

Related: Bootstrap 4: How to make the row stretch remaining height?

这篇关于Bootstrap 4，如何使 col 的高度为 100%?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆