Question

我正在努力学习重新设计一个简单应用程序的Bootstrap 4。

该应用具有固定高度的页眉，固定高度的页脚，并需要使用剩余高度的灵活居中容器。

这让我发疯，因为我尝试了很多例子。没有工作的地方。

请参阅我最后一次尝试的此Codepen。

document, html, body {
  height: 100%;
  width: 100%;
  position: absolute;
}

#topContainer{
  height: 95px;
}

#centerContainer{
  position: inherit;
  height: 100%;
}

#bottomContainer{
  height: 45px;
}

<!doctype html>
<html lang="de">
<head>
  <!-- Required meta tags -->

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Test Construction</title>

</head>
<body>

<div class="container-flex bg-success h-100">

    <div id="topContainer" class="row flex-row bg-primary">
        <div class="col-4 bg-danger">1</div>
        <div class="col-4 bg-info">2</div>
        <div class="col-4 bg-dark">3</div>
    </div>

    <div id="centerContainer" class="row flex-row bg-secondary">
        <div class="col-4 bg-dark">1</div>
        <div class="col-4 bg-danger">2</div>
        <div class="col-4 bg-info">3</div>
    </div>

    <div id="bottomContainer" class="row flex-row bg-warning">
        <div class="col-4 bg-info">1</div>
        <div class="col-4 bg-dark">2</div>
        <div class="col-4 bg-danger">3</div>
    </div>

</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

</body>
</html>

对我有什么提示我该如何处理？

一段时间后，我发现了一个可能有效的示例。我在Windows机器上尝试过并冷却它 https://codepen.io/anon/pen/aryXba

但是在chrome的Linux机器上我的symfony / bootstrap项目中的相同布局不再起作用

Answer 1

这是一个使用引导程序的简单示例。

应用于中心元素的

flex-grow将占用剩余空间，具体取决于容器的高度以及页眉和页脚。另外请注意，要使flex-grow正常工作，您的父元素需要使用弹性框。

在此处查看示例 Code Pen

Answer 2

flex-grow仅在父元素具有display flex属性的情况下有效

  

*{
    margin: 0px;
    padding: 0px;
    height: 100%;
}

.parent {
    display: flex;
    flex-direction: column;
}
          	 
.top-fixed {
    height: 50px;
    background-color: red;
    }

.bottom-fixed {
    height: 40px;
    background-color: blue;
}

.expandable {
    flex-grow: 1;
    background-color: green;
}

<div class="parent">	
    <div class="top-fixed"></div>
    <div class="expandable"></div>
    <div class="bottom-fixed"></div>
</div>

在上面的用于父元素显示的代码片段中，分配了flex属性，创建了固定的页眉（顶部固定）和页脚（底部固定），并且中心分隔是可扩展的，它将占据剩余的高度

您还可以根据需要更改弯曲方向

全高容器填充剩余的高容器

2 个答案: