Html 未延伸至底部的div

我想创建一个这样的布局-

页脚是粘的

下面是我尝试的代码：

正文{
位置：相对位置；
-moz用户选择：无；
-ms用户选择：无；
-webkit用户选择：无；
用户选择：无；
}
html，
身体{
身高：100%；
保证金：0；
}
.集装箱{
最大宽度：1280px；
保证金：0自动；
}
.换页{
最小高度：100%；
边缘底部：-45px；
背景色：#F2F2；
}
#标题{
高度：80px；
宽度：100%；
背景色：#fdbb30；
位置：相对位置；
垫底：10px；
}
.adminpanelContainer{
背景色：白色；
填充：40px；
边缘顶部：20px；
身高：100%；
}
#页脚{
宽度：100%；
背景色：#fff；
z指数：1；
}
#页脚包装{
高度：45px；
}

---

这将对您有效：

我刚才补充说↓

#body .container{
  height: calc(100vh - (90px + 45px));
}

计算如下：

height: calc(100ViewportHeight - (#header[height+padding-bottom]+ #footerwrapper[height]));

如果您想了解和的更多信息，请单击它们

代码段中的工作示例：

正文{
位置：相对位置；
-moz用户选择：无；
-ms用户选择：无；
-webkit用户选择：无；
用户选择：无；
}
html，
身体{
身高：100%；
保证金：0；
}
.集装箱{
最大宽度：1280px；
保证金：0自动；
}
.换页{
最小高度：100%；
边缘底部：-45px；
背景色：#F2F2；
}
#标题{
高度：80px；
宽度：100%；
背景色：#fdbb30；
位置：相对位置；
垫底：10px；
}
.adminpanelContainer{
背景色：白色；
填充：40px；
边缘顶部：20px；
身高：100%；
}
#页脚{
宽度：100%；
背景色：#fff；
z指数：1；
}
#页脚包装{
高度：45px；
}
#身体，容器{
高度：计算（100vh-（90px+45px））；
}

---

在不调整任何现有标记的情况下，也可以通过为适用的嵌套元素声明高度单位值来实现预期行为

首先声明相对高度（使用百分比单位值） 对于元件

#主体

-说明组件的组合高度 嵌套的

页眉

和

页脚

元素，例如：

#body {
    /* 100% height minus the sum of header & footer height */
    height: calc(100% - 125px);
}

接下来，为任何进一步的嵌套元素声明

height:100%

需要占用视口的全部可用高度， e、 g:

下面的代码片段用

fixed

和

relative

页脚元素演示了这种行为

固定页脚：

正文{
位置：相对位置；
-moz用户选择：无；
-ms用户选择：无；
-webkit用户选择：无；
用户选择：无；
}
html，
身体{
身高：100%；
保证金：0；
}
.集装箱{
最大宽度：1280px；
保证金：0自动；
文本对齐：居中；
}
.换页{/*已调整*/
身高：100%；
背景色：#F2F2；
}
#标题{
高度：80px；
宽度：100%；
背景色：#fdbb30；
位置：相对位置；
垫底：10px；
}
.adminpanelContainer{
背景色：白色；
填充：40px；
边缘顶部：20px；
身高：100%；
}
#页脚{
宽度：100%；
背景色：#fff；
z指数：1；
/*附加的*/
位置：固定；
底部：0；
}
#页脚包装{
高度：45px；
}
/*附加的*/
* {
框大小：边框框；
}
#身体{
高度：计算（100%-125px）；/*100%高度减去页眉和页脚高度之和*/
}
.panelContainer{
身高：100%；
/*添加以下样式只是为了演示*/
背景：白色；
边框：1px实心#d6；
框大小：边框框；
最大宽度：80%；
保证金：自动；
}
.panelContainer.内部{
位置：相对位置；
身高：100%；
}
.panelContainer.内跨{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
高度：20px；
保证金：自动；
}

高度：80px
用
百分比
值声明的相对高度
高度：45像素

.panelContainer {
    height: 100%;
}