CSS使HTML页脚保持在页面底部的最小高度，但不重叠页面
CSS使HTML页脚保持在页面底部的最小高度，但不重叠页面
http://www.workingstorage.com/Sample.htm
当页面较短且屏幕未被填充时，请坚持到窗口底部，以及 停留在文档的末尾，当有超过一个内容的屏幕(而不是重叠的内容)时，按照正常的方式向下移动。
四季花海浏览 950回答 3
3回答
-
繁星淼淼
一个简单的方法就是让身体100%在您的页面中，有一个min-height的100%我也是。如果你的脚的高度不改变的话，这很好。给页脚一个负的页边距-顶部：#footer { clear: both; position: relative; height: 200px; margin-top: -200px;} -
MMTTMM
我已经开发了一个非常简单的方法来将页脚放在底部，但是作为最常见的方法，您将需要调整它以适应您的页脚的高度。视图演示下面的方法通过放置::after上的伪元素。body，并将其设置为精确性页脚的高度，因此它将占用与页脚完全相同的空间，因此当页脚是absolute放置在它上面，它看起来就像页脚真的占据了空间，消除了它的绝对定位的负面影响(例如，检查身体的内容)。基本通用标记html{ height:100%; }body{ min-height:100%; padding:0; margin:0; position:relative; }header{ height:50px; background:lightcyan; }footer{ background:PapayaWhip; }/* Trick: */body { position: relative;}body::after { content: ''; display: block; height: 50px; /* Set same as footer's height */}footer { position: absolute; bottom: 0; width: 100%; height: 50px;}<body> <header>Header</header> <article>Content</article> <footer>Footer</footer></body>下面的方法允许动态页脚高度：使用挠曲箱html, body{ height:100%; margin:0; }header{ height:50px; background:lightcyan; }footer{ height:50px; background:PapayaWhip; }/* Trick */body{ display:flex; flex-direction:column; }footer{ margin-top:auto; } <body> <header>Header</header> <article>Content</article> <footer>Footer</footer></body>使用表-布局html,body { height: 100%; margin: 0; }header { height: 50px; background: lightcyan;}footer { height: 50px; background: PapayaWhip;}/**** Trick: ****/body { display: table; width: 100%; }footer { display: table-row;}<body> <header>Header</header> <article>Content</article> <footer>Footer</footer></body>
随时随地看视频慕课网APP
Html/CSS