引导网格，中间内容粘在页面顶部答案

【问题标题】：Bootstrap grid, middle content stuck to top of page引导网格，中间内容粘在页面顶部
【发布时间】：2018-06-18 22:39:20
【问题描述】：

我正在尝试构建一个 CMS 样式的 html 模板，以便用户可以将内容放入模板中。

我正在使用引导网格来创建模板，但我遇到了一些问题。

基本上我正在拍摄一个主体容器，它有一个粘性顶部，一个粘性底部，然后主要的中间部分填充了容纳其他区域的其余空间。

在这种情况下，中间部分有 2 个 50% 的区域，一个在左侧，一个在右侧。

问题是我的中间部分目前与顶部一起卡在页面的最顶部，但我需要它以按照我的结构方式填充中间，但我不确定我应该怎么做改变定位。

这是当前块：

<head>
  <style type="text/css">
    html,body{
      height:100%;
    }
  </style>
</head>

<div class="container-fluid" style="text-align: center; height:100%; border: 1px solid red;">
    <div class="row top"> 
      <div class="col-lg-12" style=" background-color: #A0A0A0;position: absolute; height: 15%;">
        <p style="color: white">Top</p>
      </div>
    </div>
    <div class="row middle">
      <div class="col-lg-6" style=" background-color: #A0A0A0">
        <p style="color: white">Left</p>
      </div>
      <div class="col-lg-6" style="   background-color: #A0A0A0;">
        <p style="color: white">Right</p>
      </div>
    </div>
    <div class="row bottom">
      <div class="col-lg-12" style=" background-color: #A0A0A0; bottom:0; position: absolute; height: 10%;">
        <p style="color: white">Bottom</p>
      </div>
    </div>
</div>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

你让自己很难受。您可以更改以下一些内容以获得所需的结果，并使您自己更容易控制和包含您的 CSS。我已将 .my-container 类添加到 .container-fluid 以防止更改应用于其他页面，但这完全是可选的：

html,
body {
  height: 100%;
}

.my-container {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: 100%;
}

.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
  background-color: #A0A0A0;
  color: white;
  text-align: center;
}

.my-container>.middle {
  /* make middle section push header and footer at the margins of available space */
  flex-grow: 1;
  
}

.my-container>.middle>* {
  border: 1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid my-container">
  <div class="row top">
    <div class="col-lg-12">
      <p>Top</p>
    </div>
  </div>
  <div class="row middle">
    <div class="col-lg-6">
      <p>Left</p>
    </div>
    <div class="col-lg-6">
      <p>Right</p>
    </div>
  </div>
  <div class="row bottom">
    <div class="col-lg-12">
      <p>Bottom</p>
    </div>
  </div>
</div>

我也：

删除了内联styles
删除了position:absolute（否则，您需要保持页眉和页脚高度与<body> 或.container-fluid 顶部和底部填充同步，以使您的所有内容都可见）
使用flex 定位页眉和页脚
删除了被认为是非常糟糕的 UI 的 % 高度（考虑旋转屏幕时在移动设备上发生的情况 - 它如何影响带有 height:15% 的元素）。

【讨论】：

天哪，这太完美了，而且绝对更容易！非常感谢，我现在要遵循这个标准
@TomN。它还具有您无需担心页眉/页脚高度的优点。它们可以根据需要增长，并且一切都整齐地放置到位。如果其中一个太多了，您始终可以在其上添加一个max-height: Xpx; overflow-y:auto;，因此当它超出您想要的范围时，它会生成一个垂直滚动条。
但如果我希望我的页眉高度为 20%，页脚高度为 10%，我仍然可以按照传统方式进行操作吗？
实际上，没有:)。页眉和页脚不应以% 表示。大多数库根本没有在它们上设置height，只有padding，让它们从内容+填充中获得必要的高度。因为在 w/h 比大于 2:1 的设备上，纵向和横向模式下 20% 之间的差异太大，并且在 UI 方面根本没有意义，将它们的高度设置为父级的 %或视口。无需使页脚或页眉高于或低于在当前设备上显示其当前内容所需的高度。恕我直言，它看起来和感觉都不专业。
那时我可能会感到困惑：这个模板只会在静态屏幕上运行，不会是交互式的。页脚将充当带有文本的新闻行情，顶部/页眉将包含徽标、时钟和天气数据。所以你是说只要我把高度放在内容上，页脚/页眉就会相应地调整？