HTML – 在父Div的底部推页脚

发布时间：2020-12-14 22:54:38 所属栏目：资源来源：网络整理

导读：我有一个简单的布局,我在父Div中有两个Div. [See this.] 我想要实现的是,第一个子div必须占用容器中的所有可用空间[有或没有内容],强制在父Div底部的页脚.只要这必须起作用.因此,当主容器调整大小时,第一个子div仍占用可用空间,而页脚必须保留在父Div的底部.

我有一个简单的布局,我在父Div中有两个Div. [See this.]
我想要实现的是,第一个子div必须占用容器中的所有可用空间[有或没有内容],强制在父Div底部的页脚.只要这必须起作用.因此,当主容器调整大小时,第一个子div仍占用可用空间,而页脚必须保留在父Div的底部.

到目前为止我尝试的是做位置：绝对;底部：0;页脚和是,页脚将坚持到底部但第一个子div(.content)不会占用其他剩余空格.

可能吗？.请帮忙.谢谢.

HTML：


CSS：

.main {
    height: 500px;
    background: #000;
}
.content {
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;
}
.footer {
    padding: 5px 10px;
    text-align: center;
    background: #eee;
}

.content,.footer {
    display: block;
}


最佳答案
并非每个人的回答都考虑了您的请求,即解决方案是响应式的(我假设您的意思是可扩展).如果页脚的高度可以变化,那么解决方案很简单：

.main {
   height: 500px;
   position: relative;
}
.content {
   height: 90%;
}
.footer {
   bottom: 0;
   height: 10%;
   position: absolute;
   width: 100%;
}

如果页脚必须是固定高度,解决方案仍然非常简单,但不再具有出色的浏览器支持：

.main {
   height: 500px;
   position: relative;
}
.content {
   height: calc(100% - 50px);
}
.footer {
   bottom: 0;
   height: 50px;
   position: absolute;
   width: 100%;
}

注意：Content-Box(默认元素大小调整方法)将边距等内容添加到您指定的大小.如果您以像素为单位表示大小,那只是一个小麻烦 – 您只需从您指定的大小中减去边框/边距/等.如果你使用百分比来反应性地构建……那就太乱了.您需要应用Border-Box,它会根据您指定的尺寸减去边距等内容.

* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!