logo标签列表

如何让Bootstrap 4的列高度达到100%？

csstwitter-bootstrapbootstrap-4grid-layout
55

如何使用Bootstrap 4让列占据浏览器的100％高度？

请参考以下链接：https://codepen.io/johnpickly/pen/dRqxjV

请注意黄色区域，我需要此区域/列占据100％的高度...有没有方法可以实现这一点而不必使所有父级元素的高度都为100％？

谢谢

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>
我假设你已经在某个地方指定了这个：<div class="col-sm-2 hidden-lg-up hidden-xs-down"></div>？ - ganders
7个回答
89

使用Bootstrap 4的h-100类实现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

您还需要确保任何父级元素也具有100%高度（或已定义高度）...

html,body {
  height: 100%;
}

注意：100%高度并不等同于“剩余”高度。

相关：Bootstrap 4：如何使行拉伸剩余的高度？

1
如果列中的内容超过100％的高度（例如长表单），则此方法无效。 - BvuRVKyUVlViVIc7
是的，在这种情况下，您应该使用min-height而不是height：https://www.codeply.com/go/MjGkqFWmA1 - Carol Skelly
不要编辑CSS文件，而是添加<html class="h-100">和<body class="h-100">。 - cespon
@Zim，如果我有超过3个父元素，那么我需要将h-100类添加到所有的父元素吗？ - user9437856
27

使用 Bootstrap 类 vh-100

例如：

   <div class="vh-100">
       <p> Full Height </p>
   </div>
1
哇，这个花了好多天的时间，谢谢。 - java-addict301
10

我尝试了Stack Overflow上建议的超过六种解决方案，唯一对我有效的是这个：

<div class="row" style="display: flex; flex-wrap: wrap">
    <div class="col-md-6">
        Column A
    </div>
    <div class="col-md-6">
        Column B
    </div>
</div>

我从https://codepen.io/ondrejsvestka/pen/gWPpPo中找到了解决方案。

请注意它似乎会影响列的边距。 我必须对它们进行调整。

不幸的是，我刚刚发现这会导致在Safari中垂直堆叠列。将其保留在此处，以防有人知道如何修复它。 - Derrick Miller
1
这不就是由于 flex-wrap: wrap 引起的吗？基本上意味着如果屏幕没有足够的空间将它们放在一起，它们将换行到下一行，使其位于下方而不是旁边。 - T1960CT
2
我遇到了这个问题，因为我的列超过了行网格的长度（>12）。
使用100% Bootstrap 4的解决方案：
由于Bootstrap中的行已经具有 display：flex 属性，
所以您只需要将 flex-fill 添加到列中，并在容器及其任何子元素中添加 h-100 即可。
代码片段在此处：https://codepen.io/joshkopecek/pen/Exjdgjo 
<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">

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

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

    <div id="green" class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100">
      Another form
    </div>
  </div>
</div>
1
我是这样解决的：

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

                <article className="d-flex flex-column justify-content-center align-items-center vh-100">
                        <!-- content -->
                </article>

            </div>
    </section>
0

为父级div设置display: table，为子级divs设置display: table-cell

HTML：

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

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

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

CSS：

#yellow {
  height: 100%;
  background: yellow;
  width: 50%;
}
#red {background: red}

.container-fluid {bacgkround: #ccc}

/* this is the part make equal height */
.display-as-table {display: table; width: 100%;}
.display-as-table > div {display: table-cell; float: none;}
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接