Question

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

我使用自举网格创建模板，但我遇到了一些问题。

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

在这种情况下，中间部分有两个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>

Answer 1

你自己也很努力。以下是您可以更改以获得所需结果的一些内容，还可以让您更轻松地控制和包含CSS。我已将.my-container课程添加到.container-fluid以防止更改应用于其他页面，但这完全是可选的：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我也是：

已删除内联style s
已移除position:absolute（否则您需要保持页眉和页脚高度与<body>或.container-fluid顶部和底部填充同步，以便您的所有内容都可见
使用flex来定位页眉和页脚
删除%高度，这被视为非常糟糕的用户界面（考虑旋转屏幕时移动设备上会发生什么 - 它如何影响height:15%元素。）

引导网格，中间内容粘贴到页面顶部

1 个答案: