Html 当内容较小/为空时，使内容容器div拉伸
我目前正在一个网站上工作，有时（例如，当加载方块出现时，如下图所示）主内容div太小，无法用页脚/页眉填充整个页面 我希望当contentdiv太小时，页眉和页脚之间的主要内容可以拉伸，这样它就可以填充整个屏幕，同时保持页脚和页眉在视图中 我尝试了许多不同的方法来做这件事，但到目前为止都没有用。下图说明了我的问题 HTML布局如下所示：Html 当内容较小/为空时，使内容容器div拉伸,html,css,Html,Css,我目前正在一个网站上工作，有时（例如，当加载方块出现时，如下图所示）主内容div太小，无法用页脚/页眉填充整个页面 我希望当contentdiv太小时，页眉和页脚之间的主要内容可以拉伸，这样它就可以填充整个屏幕，同时保持页脚和页眉在视图中 我尝试了许多不同的方法来做这件事，但到目前为止都没有用。下图说明了我的问题 HTML布局如下所示： <body> <div class="nav-container"></div> <div class="ma
<body>
<div class="nav-container"></div>
<div class="main-container"></div>
<footer></footer>
</body>
如果您熟悉flexbox，这将实现以下功能：
<body>
<header></header>
<div class="main-container"> Main content </div>
<footer></footer>
</body>
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header, footer {
flex: none;
}
.main-container {
flex: auto;
}
主要内容
html，正文{
保证金：0；
身高：100%；
最小高度：100%；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
页眉、页脚{
flex：无；
}
.主货柜{
flex：自动；
}