html div布局 页脚,HTML – 在父Div的底部推页脚

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

.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;

}