我有一些 A4 大小的 div，内容量不同。我尝试在每页中放置页脚和页码。页脚应固定在页面底部。
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px
}
.footer {
position: absolute;
bottom: 0px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>这是一个JsBin也可以一起玩。
最佳答案
当您使用 position: absolute 时，您必须正确识别 containing block :
If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky) (from MDN).
在您的情况下，除了 static 之外，没有包含位置值的包含 block - 所以 .footer 元素相对于根 html 元素定位自己。
在 .page 上设置 position: relative 一切正常:
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px;
position: relative;
}
.footer {
position: absolute;
bottom: 0px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>关于html - 在 A4 大小的 div 中定位页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51117136/