Question

如何将孩子适当地伸展到父母的身高？我尝试过很多我发现的变种（很多很复杂），但它对我来说从来没有用过。我更喜欢用flex-box来做这个，因为这似乎是最新的方法。这是我的尝试：

<div class="main h-100">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a href class="navbar-brand">Menu</a>
  </nav>
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col-xs-2 bg-light h-100 pr-3 menuContainer">
        <button class="btn btn-outline-primary mt-3 btn-sm btn-block"> Test </button>
        <nav class="navbar navbar-light list">
          <ul class="navbar-nav flex-column">
           <li class="nav-item"><a href="#" class="nav-link">A1</a></li>
           <li class="nav-item"><a href="#" class="nav-link">A1</a></li>

          </ul>
        </nav>
      </div>
      <div class="col-xs-10 p-0">
        Content
      </div>
    </div>
  </div>

body {
  height: 100vh;
}

.bg-light {
  background-color: green !important;
}

.list {
  overflow-y: auto;
  height: 100%;
  align-items:start
}

.menuContainer {
  display: flex;
  flex-flow: row wrap;
}

.list {
  flex: 1;
  background-color: red;
}

http://jsfiddle.net/x1hphsvb/2065/

最后我想要删除滚动条，以便菜单（红色框）从现在开始的地方开始，并在屏幕结束处准确结束。

目标也是能够用Content代替height: 100%而不是overflow-y: auto。所以它也是如此。

内容和菜单都可以更大 - 在这种情况下，我希望他们自己添加一个滚动 - 我使用data1<-rnorm(n = 1000,mean = 0,sd = 1) data<-cbind(data,data,data,data) for(i in c(1,2,3)){ print(i) if(i ==1){ #Histograms and density jpeg(paste(getwd(),'/Hist_',i,'.jpg',sep='')) histogram( data[,1],xlab = "data" ) dev.off() #boxplot jpeg(paste(getwd(),'/Boxplot_',i,'.jpg',sep='')) boxplot(data[,1],xlab='cluster', ylab='data') dev.off() }else{ #Histograms and density jpeg(paste(getwd(),'/Hist_',i,'.jpg',sep='')) histogram( data[,1],xlab = "data" ) dev.off() #boxplot jpeg(paste(getwd(),'/Boxplot_',i,'.jpg',sep='')) boxplot(data[,1],xlab='cluster', ylab='data') dev.off() } }。

Answer 1

http://jsfiddle.net/x1hphsvb/2083/

html, body {
  height: 100%;
}

.bg-light {
  background-color: green !important;
}

.list {
  overflow-y: auto;
  align-items:start
}

.menuContainer {
  display: flex;
  flex-direction: column;
}

.list {
  flex: 1;
  background-color: red;
}

.site-content {
  height: calc(100% - 56px);
}

主要差异：

flex-direction: column。
在.site-content上移除100％的高度，而不是标题高度calc(100% - 56px)。

Answer 2

你得到了溢出，因为你给了很多（如果不是全部）元素height: 100%。它随附Bootstrap代码：

.h-100 {
    height: 100% !important;
}

因此，当容器中有多个元素时，兄弟姐妹会溢出父元素。

我会从要填充容器高度的元素中删除height: 100%。 Flexbox提供了一种更有效的方法。

在元素上设置display: flex时，它会在子元素上应用align-items: stretch。这意味着孩子们将自动扩展以填充容器的高度。

在一个元素（即祖先）上设置高度。然后继续向HTML结构中的每个子项添加display: flex。嵌套弹性容器没有问题。

Answer 3

在Bootstrap 4.1中，为此目的有一个flex-fill实用程序类。

.flex-fill {
  flex: 1 1 auto;
}

在您的情况下，将其添加到container-fluid，您将不需要所有h-100。另外，制作container fluid d-flex，以便flex-fill上也可以应用row。

<div class="main h-100 d-flex flex-column">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a href class="navbar-brand">Menu</a>
  </nav>
  <div class="container-fluid flex-fill d-flex">
    <div class="row flex-fill">
      <div class="col-xs-2 bg-light pr-3 menuContainer d-flex flex-column">
        <button class="btn btn-outline-primary mt-3 btn-sm btn-block"> Test </button>
        <nav class="nav navbar-light list">
          <ul class="navbar-nav flex-column">
           <li class="nav-item"><a href="#" class="nav-link">A1</a></li>
           <li class="nav-item"><a href="#" class="nav-link">A1</a></li>
          </ul>
        </nav>
      </div>
      <div class="col-xs-10 p-0">
        Content
      </div>
    </div>
  </div>
</div>

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

此外，请注意，col-xs-*在{4}}中是col-*，因为-xs中缀已被删除。这是一个simplified example w / o额外的CSS。

相关问题： Bootstrap 4 Navbar and content fill height flexbox

Flexbox：将侧边栏高度拉伸到父

3 个答案: