我正在尝试构建一个 CMS 样式的 html 模板，以便用户可以将内容放入模板中。
我正在使用引导网格创建模板，但我遇到了一些问题。
基本上我正在拍摄一个主体容器，它有一个粘性顶部、一个粘性底部，然后主要中间部分填充容纳其他区域的其余空间。
在这种情况下，中间部分有 2 个区域为 50%，一个在左侧，一个在右侧。
问题是我的中间部分目前与顶部部分一起固定在页面的最顶部，但我需要它按照我构建它的方式填充中间部分，但我不确定我应该怎么做改变定位。
这是当前区 block :
<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>
最佳答案
你是在给自己添麻烦。您可以更改以下几项以获得所需的结果，并使您更容易控制和包含您的 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>我还:
- 删除了内联
style小号 - 已删除
position:absolute(否则，您需要使页眉和页脚高度与<body>或.container-fluid顶部和底部填充保持同步，这样您的所有内容都可见) - 用过
flex定位页眉和页脚 - 已删除
%高度被认为是非常糟糕的 UI(考虑旋转屏幕时在移动设备上发生的情况 - 它如何影响带有height:15%的元素)。
关于html - Bootstrap 网格，中间内容粘在页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50911416/