/* 先将文档分成不同区域,比如页头、主体、页脚 */ header { height: 100px; /* 页头高度 */ } main { min-height: calc(100vh - 200px); /* 主体高度为窗口高度减去页头和页脚的高度 */ } footer { height: 100px; /* 页脚高度 */ position: fixed; /* 使用fixed属性将页脚固定在底部 */ bottom: 0; /* 将页脚置于底部 */ width: 100%; /* 页脚宽度与浏览器宽度一致 */ }
在代码中,首先将整个文档分成三个部分,即页头、主体和页脚。通过设置主体的min-height属性,使页面最小高度为视口高度减去页头和页脚的高度,这样无论页面内容的多少,页脚都能够始终固定在底部。
而页脚则需要使用position和bottom两个属性,将其固定在文档底部,同时设置其宽度为100%,使其占据整个页面宽度。这样,无论浏览器的大小如何,页脚都能够始终固定在底部。