Question

我有一个包含标题，内容区域和页脚的容器div。我希望页脚始终固定在底部，而内容区域始终填充剩余的空间。而且我不知道该怎么做。

这是我目前拥有的：

.container {
  display: grid;
  /*position: relative;*/
  grid-template-columns: 1fr;
  border: 1px solid black;
}

.header {
  background-color: yellow;
  display: grid;
  grid-template-columns: 3fr 3fr 3fr 1fr;
  padding: 10px 0;
}

.content {
  background-color: teal;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  padding: 15px 20px 20px 0;
  min-height: 100%;
}

.footer {
  background-color: maroon;
  position: absolute;
  width: 100%;
  bottom: 0;
}

<div class="container">
  <div class="header">This is a header.</div>
  <div class="content">This is a content area.</div>
  <div class="footer">This is a footer.</div>
</div>

如您所见，内容部分并没有一直延伸到页脚部分。我在这里想念什么？

谢谢！

Answer 1

使用grid-template-rows: auto 1fr auto;-这样footer和header只会占用他们需要的空间，而content会占用其他所有空间。另外，从position: absolute;中删除footer，使其成为网格项。

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  border: 1px solid black;
  min-height: 100vh;
}

.header {
  background-color: yellow;
  padding: 10px 0;
}

.content {
  background-color: teal;
  padding: 15px 20px 20px 0;
  min-height: 100%;
}

.footer {
  background-color: maroon;
  width: 100%;
}

<div class="container">
  <div class="header">This is a header.</div>
  <div class="content">This is a content area.</div>
  <div class="footer">This is a footer.</div>
</div>

Answer 2

<script>        
$(document).ready(function(e) {
    var h = $( window ).height();
    $('.container').css('max-height', h-220+'px');
});         
</script>

如果页脚高度为220px，则用于容器高度。您可以根据需要更改高度。

<style>
    .footer{ bottom:0; position:fixed; }
</style>

用于将页脚固定在底部。

高度为100％的Div（带显示）：网格

2 个答案: