Html 填充内容背景直到到达页脚_Html_Css

Html 填充内容背景直到到达页脚

html css

Html 填充内容背景直到到达页脚,html,css,Html,Css,我有类似的问题，可以找到。但是我不能让它工作，或者我没有完全理解它我试图解决的问题是——我希望我的内容背景达到页脚，即使没有足够的内容显示。我制作了一把可以找到的简单小提琴。正如您所看到的，并没有足够的内容到达页脚，并且在内容和页脚之间有一个“蓝色”空间。我想把那个空间变成灰色 HTML: <div class=blue>header here</div> <p>LOGO here</p> <div class="blue">navi

我有类似的问题，可以找到。但是我不能让它工作，或者我没有完全理解它

我试图解决的问题是——我希望我的内容背景达到页脚，即使没有足够的内容显示。我制作了一把可以找到的简单小提琴。正如您所看到的，并没有足够的内容到达页脚，并且在内容和页脚之间有一个“蓝色”空间。我想把那个空间变成灰色

HTML:

<div class=blue>header here</div>
<p>LOGO here</p>
<div class="blue">navigation bar here</div>
  <div class="content">
No content.
  </div>
<div class="footer">footer is here</div>

所有的帮助将不胜感激

您可以将其添加到内容样式中：

min-height:400px;

它会推动页脚一点，但它会做的工作

希望这就是您想要的。

使用CSS3

calc（）

函数

诀窍是，如果你知道页眉和页脚的高度，你可以用vh单位使用这个函数，

100vh

给你屏幕高度，只需从中减去听者和页脚的高度

例如

如果页眉为80px，页脚为40px，即总计120px，则使用

.content{
    min-height: calc(100vh - 120px);
}

使用最小高度的目的是，如果内容不存在，则至少应用此高度，但如果内容多于屏幕，则会相应地扩展div

更新的JSFIDLE:

根据您的浏览器支持要求，最简单的方法是使用CSS网格，它允许您定义行和列，并将某些内容分配到特定位置（按

网格行和网格列放置），如下所示：

html，
身体{
身高：100%；
}
/*强制调整所有元件的尺寸，包括
它们的填充和边框宽度*/
身体，
：：之前，
：：之后{
框大小：边框内容；
}
身体{
/*要使用CSS网格，请强制
要采用“显示：网格项”的元素：*/
显示：网格；
/*定义网格的三列，第一列和第二列
第三个是后剩余空间的等分
计算第二（中间）列的宽度400px*/
网格模板列：1fr 400px 1fr；
/*将前三行减少到所需的最小高度
要完全显示其内容，请设置第四行
一次又一次地占用剩余的空闲空间
计算高度并将最后一行的高度设置为
30px：*/
网格模板行：最小内容最小内容最小内容1fr 30px；
高度：100vh；
背景图片：url(https://i.stack.imgur.com/2oC8H.jpg);
}
正文>*{
/*设置要放置的对象的所有子元素
在网格列2中（中心400px宽列）：*/
网格柱：2；
}
/*设置.blue元素的默认共享样式：*/
蓝先生{
颜色：#ffffff；
背景色：#294a70；
}
.blue.header{
/*将此元素定位在第一个位置（基于一个计数）
行：*/
网格行：1
}
身体>p{
网格行：2；
}
.蓝色.导航{
网格行：3；
}
部门内容{
网格行：4；
/*背景色纯粹是为了显示空间的颜色
div.content元素占用全部可用空间：*/
背景色：#ffa；
}
分区页脚{
网格行：5；
}
标题在这里
这里的标志
导航栏在这里
没有内容。
页脚在这里
您可以尝试使用flexbox布局：
HTML
<body>
    <header></header>
    <main class="content"></main>
    <footer></footer>
</body>

查看此代码笔示例：感谢您的回复，但它无法完成任务。无论屏幕大小如何，我都需要扩展内容背景。作为网格布局的坚决反对者，我几乎不认为这是最简单的当代方式。不管是哪种意见。Flexbox ftw plus实际上是受支持的好吧，我不理解你对简化其他复杂布局创建的布局技术的憎恨，但至少感谢你花时间解释：）我选择不使用flex box的原因是flex模型固有的一维方法（当然，二维可以与嵌套一起使用），而网格提供简单的（对于给定的“simple”值）二维布局。仍然：ymmv等等：）您选择使用css网格是因为它在双向上更好。但这个布局问题显然是单向的：垂直的。嘿，每个人都有自己的想法，但是bootstrap混淆了类名和css网格答案所需的所有解释，人们可能会理解我对将flexbox中的简单内容复杂化的憎恨。很明显，他不是最有经验的程序员，不会直接使用CSS网格。你似乎喜欢它，所以也许我会更深入地了解，但这不会得到支持这么快，我是一些地方阅读有关vh单位，但不了解他们，你简单地说，并与我的例子，我设法实现它在我的网站上了。谢谢你帮我解决了这个问题。
<body>
    <header></header>
    <main class="content"></main>
    <footer></footer>
</body>

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main.content {
    flex: 1;
}