Question

我正在使用 Bootstrap 4 （现在我正在使用alpha-6）。

我遇到这种情况：

<h:form>
    <p:commandButton value="Basic" ajax="true" process="@this"
        update=":dlg1" oncomplete="PF('widget-dialog').show();"
        actionListener="#{dialogView.changeTitle('Dynamic title')}" />

    <p:commandButton value="Widget" ajax="true" process="@this"
        update="@widgetVar('widget-dialog')"
        oncomplete="PF('widget-dialog-1').show();"
        actionListener="#{dialogView.changeTitle('Dynamic title')}" />
</h:form>
<p:dialog id="dlg1" header="#{dialogView.title}"
    widgetVar="widget-dialog" dynamic="true">
    <h:outputText value="Resistance to PrimeFaces is futile!!!" />
</p:dialog>


@ManagedBean(name = "dialogView")
@ViewScoped
public class DialogView {

    private String title = null;
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public void changeTitle(String title) {
        setTitle(title);
    }
}

这是 css ：

<body>

  <!-- HERE I HAVE one div automatically generated with randomly ID and class -->

  <div class="bigone">

    <div class="container-fluid">

      <div class="header">
        My header
      </div>

    </div>

    <div class="mybar">
      Nav bar
    </div>

    <div class="main">
      <div class="container-fluid">
        <div class="row">

          <div class="col-6">
            <div class="card">
              <div class="card-header">
                Card Header
              </div>
              <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action"><b>FIRST LINK</b></a>
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>                    
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>

                <a href="#" class="list-group-item list-group-item-action disabled"><b>LAST LINK</b></a>
              </div>
              <div class="card-footer">
                Card Footer
              </div>
            </div>
          </div>

          <div class="col-6">
            <h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br>
            <h1>LAST LINE</h1>
          </div>

        </div>
      </div>
    </div>

    <div class="footer">
      Footer
    </div>

  </div>

  <!-- HERE THAT DIV CLOSED -->

</body>

plnkr上有 DEMO ：https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3

当页面内容为空时，我需要页脚在底部，因此我正在使用：.bigone { display: flex; min-height: 100vh; flex-direction: column; } .main { flex: 1; }和Bootstrap Flexbox对齐实用程序，如：.bigone { height: 100vh; }

现在我需要<div class="bigone d-flex flex-column">中的list-group和card以及“这么多单词”才能滚动，所以要在页脚底部的最大位置加上最大值

简而言之： BODY必须没有滚动条。

我的页眉和页脚高度不固定，它们会改变。

如何？我不是Flexbox专家。

我不需要IE，只需Chrome。

重要：

我无法通过以下方式修复卡片高度：

col-6

因为我的页眉，页脚等高度会动态变化。

问题图片：

Answer 1

根据spec，设置flex: 1（在.main元素上）相当于flex: 1 1 0，简写为：

flex-grow: 1
flex-shrink: 1
flex-basis: 0

但是，出于某种原因，flex: 1在您的代码中无法正常工作。（我只根据您的问题在Chrome中查看）。

但是，如果您提供.main完整的速记 - 并将其设为灵活容器并添加overflow - 您的布局似乎有效。

.main {
    flex: 1 1 0; /* flex: 1, which you had before, is equivalent but doesn't work */
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

revised plunkr

参考：

7.1.1. Basic Values of flex

编辑（根据问题的变化）

我上面的回答从body中移除了滚动条，并为.main部分提供了一个垂直滚动条。

要为.main部分中的每列提供垂直滚动条，请进行此调整：

.main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
    display: flex;
}
.col-6 {
    overflow-y: auto;
}

revised plunkr

Answer 2

我有

<div class="fixed-top collapse show wrapper">
 <ul class="list-group bg-white menu">
 </ul>
</div>

我修复了

.wrapper {
    margin-top: 48px; /* place it under navbar */
    height: 100vh;
    overflow: scroll;
    padding-bottom: 48px; /* compensate margin top */
}

Answer 3

Created a new Plunker to showcase what you're looking for.

要将页脚保持在底部，请使用Bootstrap Flexbox Auto Margins。

如果要将主要内容保留在初始视口高度内，请将flex-grow:1属性与overflow-y:scroll一起使用。它的高度将根据其他元素使用的空间响应。

希望这会有所帮助。

Bootstrap 4，使用flexbox，使用或不使用body scroll，使列表组可以连续滚动

3 个答案: