HTML– 在父Div的底部推页脚_html-js-css

概述我有一个简单的布局,我在父Div中有两个Div. [See this.]我想要实现的是,第一个子div必须占用容器中的所有可用空间[有或没有内容],强制在父Div底部的页脚.只要这必须起作用.因此,当主容器调整大小时,第一个子div仍占用可用空间,而页脚必须保留在父Div的底部.到目前为止我尝试的是做位置：绝对;底部：0;页脚和是,页脚将坚持到底部但第一个子

我有一个简单的布局,我在父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;}
          总结       以上是内存溢出为你收集整理的HTML  – 在父Div的底部推页脚全部内容，希望文章能够帮你解决HTML  – 在父Div的底部推页脚所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。					
										


					
						欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1121967.html

HTML– 在父Div的底部推页脚

发表评论

评论列表（0条）