Question

我有以下网页：

<!DOCTYPE html>
<html>
 <head>
  <title>Lorem Ipsum</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
 </head>
 <body>
  <style type="text/css">
body {
    background-color: #fafafa;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    display: block;
    width: 90%;
    max-width: 1200px;
    min-width: 380px;
}

main {
    font-size: 0.8em;
}

footer {
    padding: 10px 0px;
    margin-top: 10px;
    width: inherit;
    font-size: 0.8em;
    bottom: 0px;
    position: absolute;

}

  </style>
  <main>
  {{{content}}}
  </main>
  <footer>
   {{{footer}}}
  </footer>
</body>
</html>

可以使用包含一些长文本而不是占位符的jsfiddle here。

当<main>中的内容超出页脚位置时，它会开始与内容重叠;并且我无法找到一种方法将页脚保持在底部（当内容太少时）并且不会同时与内容重叠。

有什么方法可以在内容非常少时将页脚保持在底部，并且它与<main>中的内容不重叠？

Answer 1

尝试更改footer {position:fixed;}

Answer 2

向页脚添加position:fixed和正文padding-button:50px

这是一个工作示例jsfiddle

使页脚与内容不重叠

2 个答案: