CSS 如何使用 Bootstrap 4 flexbox 填充可用内容？

Question

提问by Chris Farmer

I have an angular app that uses bootstrap 4. I have a nav bar that sticks to the top, and I want to add content that fills the remaining space in the browser. Aside from the navbar at the top, I have another div that itself contains header and footer content. Between the header and footer, I have a main content section, and I want that section (#twoin my example below) to fill all empty space.

我有一个使用 bootstrap 4 的 angular 应用程序。我有一个贴在顶部的导航栏，我想添加填充浏览器中剩余空间的内容。除了顶部的导航栏，我还有另一个 div，它本身包含页眉和页脚内容。在页眉和页脚之间，我有一个主要内容部分，我希望该部分（#two在下面的示例中）填充所有空白空间。

I thought I could use css flexbox to accomplish this, but my simple non-bootstrap flexbox example seemed to do nothing when I moved into the bootstrap world. I was using these docsto try to figure this out.

我以为我可以使用 css flexbox 来实现这一点，但是当我进入 bootstrap 世界时，我的简单非引导 flexbox 示例似乎什么也没做。我正在使用这些文档来尝试解决这个问题。

I thought using align-self-stretchshould help accomplish this goal, but it sort of looks like the containing elements might be sizing themselves just big enough to hold my #outercontent, so there's no flexbox expanding to be done. I tried naively just adding height:100%styles to the containing divs just to try to get some stretching, but that didn't seem to help.

我认为使用align-self-stretch应该有助于实现这个目标，但看起来包含元素可能会调整自己的大小以容纳我的#outer内容，所以没有 flexbox 扩展要做。我天真地尝试将height:100%样式添加到包含的 div 中只是为了尝试进行一些拉伸，但这似乎没有帮助。

I created this plunker examplebased on @ZimSystem's response. His codeply example seemed to work exactly as I wanted, but when I tried to piece the changes into my simple angular code, the flex stretching didn't happen. I'm not sure what I'm doing to break it in the conversion.

我根据@ZimSystem 的响应创建了这个plunker 示例。他的 codeply 示例似乎完全按照我的意愿工作，但是当我尝试将更改拼凑到我的简单 angular 代码中时，没有发生 flex 拉伸。我不确定我在做什么来破坏它在转换中。

This is the entirety of the angular component I am viewing at the moment:

这是我目前正在查看的整个角度组件：

<div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
        header content <br>
        another line <br>
        And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
        main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
        footer content
    </div>
</div>

And here's the application container showing the navbar and injection point:

这是显示导航栏和注入点的应用程序容器：

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav"> 
            <li class="nav-item"><a class="nav-link" routerLink="/flex">My flex view</a></li>
        </ul>
    </nav>
    <router-outlet></router-outlet>
</div>

How can I get my #twodiv to expand to fill the space while having my #oneand #threedivs acting as content headers and footers anchored to the top and bottom of the content area?

如何让我的#twodiv 扩展以填充空间，同时让我的div#one和#threediv 作为内容页眉和页脚锚定到内容区域的顶部和底部？

Answer 1

回答by Zim

Update Bootstrap 4.1.0

更新引导程序 4.1.0

The flex-grow-1and flex-fillclasses are included in Bootstrap 4.1.0

在flex-grow-1和flex-fill类都包含在引导4.1.0

Update Bootstrap 4.0.0

更新引导程序 4.0.0

Add a flex-growclass like this:

添加一个flex-grow这样的类：

.flex-grow {
    flex: 1 0 auto;
}

Then, the utility classescan be used for the rest of the layout:

然后，实用程序类可以用于布局的其余部分：

 <div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link">Item 1</a></li>
        </ul>
    </nav>
    <div id="outer" class="d-flex flex-column flex-grow">
        <div id="one" class="">
            header content
            <br> another line
            <br> And another
        </div>
        <div id="two" class="bg-info h-100 flex-grow">
            main content that I want to expand to cover remaining available height
        </div>
        <div id="three" class="">
            footer content 40px height
        </div>
    </div>
</div>

https://www.codeply.com/go/3ZDkRAghGU

Here's another example with on Bootstrap 4.3.1that has a navbar, sidebar and footer with scrolling content area: https://www.codeply.com/go/LIaOWljJm8

这是Bootstrap 4.3.1上的另一个示例，它具有带滚动内容区域的导航栏、侧边栏和页脚：https: //www.codeply.com/go/LIaOWljJm8

Answer 2

回答by Tigran Petrossian

Your component is wrapped into a <flex>element that needs the same flexbox styling to stretch vertically as well, allowing it's content to stretch with it. So adding class="d-flex flex-column flex-grow"to the <flex>will work. Here's a working fork of your plunker example.

您的组件被包装到一个<flex>元素中，该元素需要相同的 flexbox 样式才能垂直拉伸，从而允许它的内容随它一起拉伸。所以添加class="d-flex flex-column flex-grow"到<flex>将工作。这是您的 plunker 示例的工作叉。

Answer 3

回答by ConnorsFan

The problem, when using ZimSystem's markupin your Angular plunker, is that the component is inserted in the rendered HTML as an additional container with the flextag:

在 Angular plunker 中使用ZimSystem 的标记时，问题在于该组件作为带有flex标记的附加容器插入到呈现的 HTML 中：

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        ...
    </nav>
    <router-outlet></router-outlet>
    <flex>
        <div id="outer" class="d-flex flex-column flex-grow">
            ...
        </div>
    </flex>
</div>

In order to make it work as intended, you can remove the outer div from the component and set the flex classes on the component's host container, as shown in this modified plunker.

为了使其按预期工作，您可以从组件中删除外部 div 并在组件的宿主容器上设置 flex 类，如这个修改后的 plunker所示。

import {Component, NgModule, HostBinding, VERSION} from '@angular/core'
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser'

@Component({
    selector: 'flex',
    template: `
        <div id="one" class="">
            header content
            <br> another line
            <br> And another
        </div>
        <div id="two" class="bg-info h-100 flex-grow">
            main content that I want to expand to cover remaining available height
        </div>
        <div id="three" class="">
            footer content
        </div>
    `
})
export class FlexComponent {
    @HostBinding('class') classes = 'd-flex flex-column flex-grow';  
    ...
}

Answer 4

回答by Duannx

If you can not control the behavor of the class you are using. Just remove all of it and use this css only.

如果您无法控制正在使用的类的行为。只需删除所有内容并仅使用此 css。

html,
body,
flex {
  height: 100%;
  margin: 0;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.two {
  background-color: #123;
  flex-grow: 1;
  color: #FFF;
}

<flex>
  <div class="outer">
    <div class="one">
      Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br>
    </div>
    <div class="two">
      Hey. This is body
    </div>
    <div class="three">
      Hey. This is footer <br> Hey. This is footer <br>
    </div>
  </div>
</flex>

Answer 5

回答by Sara

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.flex-grow {
  flex: 1;
}

Add a wrapper component that holds your content blocks, and apply the flex-growclass to the one that you want to fill the remaining space.

添加一个包含内容块的包装器组件，并将flex-grow该类应用于要填充剩余空间的那个。

Answer 6

回答by grinmax

CSS

html, body {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

flex.components.ts

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import { RouterOutlet, RouterModule } from '@angular/router' 
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'flex',
  host: {'class': 'flex-grow'},
  template: `

<div id="outer" class="d-flex flex-column h-100 flex-grow">
  <div id="one" class="">
    header content
    <br> another line
    <br> And another
  </div>
  <div id="two" class="bg-info flex-grow">
    main content that I want to expand to cover remaining available height
  </div>
  <div id="three" class="">
    footer content
  </div>
</div>        

  ` 
})
export class FlexComponent {
  constructor() {}
}

Result - https://plnkr.co/edit/vQS7Jw58zmlVshz9YmQ8?p=previewThanks:)

结果 - https://plnkr.co/edit/vQS7Jw58zmlVshz9YmQ8?p=preview谢谢:)

Answer 7

回答by JayChase

You can make the component grow to fill its container and then have it as a flex column as well so the content will also grow. To do this use :hostto target the component element.

您可以使组件增长以填充其容器，然后将其作为 flex 列，这样内容也会增长。为此，请使用:host定位组件元素。

flex.component.ts

  @Component({
    selector: 'flex',
    template: `

  <div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
      header content
      <br> another line
      <br> And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
      main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
      footer content
    </div>
  </div>        

    `,
    styles: [':host {flex: 1 0 auto; display: flex; flex-direction: column }']
  })

I've updated the plunk.

我已经更新了plunk。

CSS 如何使用 Bootstrap 4 flexbox 填充可用内容？

提问by Chris Farmer

回答by Zim

回答by Tigran Petrossian

回答by ConnorsFan

回答by Duannx

回答by Sara

回答by grinmax

回答by JayChase

相关推荐

最近更新

标签

CSS 如何使用 Bootstrap 4 flexbox 填充可用内容？

提问by Chris Farmer

回答by Zim

回答by Tigran Petrossian

回答by ConnorsFan

回答by Duannx

回答by Sara

回答by grinmax

回答by JayChase

相关推荐

CSS 反应原生样式。宽度：百分比 - 数字

在 CSS 网格布局中使用 CSS 过渡

Chrome 中仅使用 CSS 的粘性表格标题

CSS PrimeNG - p 面板的样式大小和对齐方式

相关推荐

最近更新

标签