Html 引导网格，中间内容粘贴在页面顶部_Html_Css_Bootstrap 4

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

html css bootstrap-4

Html 引导网格，中间内容粘贴在页面顶部,html,css,bootstrap-4,Html,Css,Bootstrap 4,我正在尝试构建一个CMS样式的html模板，这样用户就可以将内容放入模板中我正在使用引导网格创建模板，但我遇到了一些问题基本上，我要拍摄的是一个主体容器，它有一个粘性的顶部，一个粘性的底部，然后主要的中间部分填充空间的其余部分，其中包含其他区域在本例中，中间部分有两个50%的区域，一个在左侧，一个在右侧问题是我的中间部分目前与顶部部分一起固定在页面的顶部，但我需要它以我构建它的方式填充中间部分，但我不确定我应该如何改变定位以下是当前块： <head> <style

我正在尝试构建一个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>


html，正文{
身高：100%；
}
顶部
左侧
对
底部

你让自己很为难。以下是一些你可以更改的内容，以获得想要的结果，也可以让你更容易地控制和包含CSS。我已将

.my container

类添加到

.container fluid

以防止更改应用到其他页面，但这是完全可选的：

html，
身体{
身高：100%；
}
.我的集装箱{
显示器：flex；
弯曲方向：立柱；
边框：1px纯红；
身高：100%；
}
.my container>.top[class^=“col-”]，
.my container>.bottom[class^=“col-”]{
背景色：#A0；
颜色：白色；
文本对齐：居中；
}
.my container>.middle{
/*使中间部分的页眉和页脚位于可用空间的边缘*/
柔性生长：1；
}
.my container>.middle>*{
边框：1px纯红；
}


顶
左
对
底部

Jeez，这太完美了，绝对简单！非常感谢，我将遵循这个标准now@TomN.它还有一个优点，你不必担心页眉/页脚的高度。页眉/页脚的高度随需要而增长，所有内容都井然有序。如果其中一个页眉/页脚的高度太高，你可以始终使用

max height:Xpx；overflow-y:au到；

，所以当它超过您想要的高度时，它会开发一个垂直滚动条。但是如果我希望我的页眉高度为20%，页脚高度为10%，我仍然可以这样做，对吗？事实上，没有：）。页眉和页脚不应该用

表示。大多数库根本不在它们上面设置

高度，只有padding
，让他们从内容+填充中获得必要的高度。因为在w/h比大于2:1的设备上，纵向模式和横向模式下20%
之间的差异太大，在父视图或视口的%
中设置它们的高度是没有意义的。不需要将任何一个页脚设置为r页眉比在当前设备上显示其当前内容所需的高度高或短。而且它看起来和感觉都没有冒犯性，IMHO。也许我当时感到困惑：这个模板将只是在一个静态屏幕上运行，不会进行交互。页脚将充当带有文本的新闻标记器，顶部/页眉将包含一个徽标、一个时钟和一个图标你是说只要我在内容上加上高度，页脚/页眉就会相应地调整？